آموزش ساخت دکمه برگشت به بالا

چاپ

ساخت دکمه برگشت به بالا همانند آسانسور 

elevator.js یکی از پلاگین های جی کوئری است، ایده ی به کار رفته در این ابزار، همانند آسانسور است.

اگر دقت کرده باشید هنگامی که سوار آسانسور می شوید، آسانسور به آرامی شروع به حرکت می کند و در حین حرکت آهنگی را پخش می کند، با استفاده از این پلاگین نیز می توان چنین حرکتی را در صفحه وب ایجاد کرد.

توجه: elevator.js مستقل از کتابخانه های دیگر است.

DEMO یا پیش نمایش پلاگین   elevator.Js

برای مشاهده نتیجه کار، روی لینک زیر کلیک نمایید:

نحوه استفاده

برای شروع به کار ابتدا یک سند HTML ایجاد کرده و پلاگین elevator.min.js را در آن فراخوانی کنید.

توجه:   فایل های مربوط به پلاگین elevator.js، را می توانید از انتهای همین مطلب دانلود نمایید.

مثال (آموزش ساخت دکمه برگشت به بالا)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> elevator.js</title>
<style type="text/css">
 
</style>
</head>
<body>
 
<script type="text/javascript"src="elevator.min.js"></script>
<script type="text/javascript"></script>
 
</body>
</html>

 محتوای صفحه را باید به گونه ای قرار داد تا امکان اسکرول عمودی در صفحه ایجاد شود.

برای برگشت به ابتدای صفحه می بایست دکمه ای را در انتهای صفحه تعبیه کرد:

ایجاد دکمه

<button class="elevator-button">برگشت به بالا</button>

تنظیم کد های CSS:

کد  CSS

}body

;background-color:##ccc

;text-align:center

}
 
p {
width:80%;
margin:auto;
padding:60px;
}
 
button {
color:#fff;
background:#660066;
padding:20px;
border-radius:5px;
cursor:pointer;
border:2px solid #000;
outline:none;
font-size:16px;
text-align:center;
display:block;
margin:auto;
}

تنظیم آهنگ و سرعت حرکت:

این اسکریپت را در انتهای فایل قرار دهید.

مثال (آموزش ساخت دکمه برگشت به بالا)

window.onload=function(){
  varelevator=newElevator({
    element:document.querySelector('.elevator-button'),
    mainAudio:'music/romantic.mp3',
    endAudio:'music/ding.mp3',
    duration:30000
  });
}
خودتان امتحان کنید »

 مهمترین ویژگی های این ابزار عبارتند از:

توجه: در صورتی که تنها دو ویژگی element  و duration مقدار دهی شوند، همان برگشت به بالای ساده انجام می شود.

سایت BenSound آهنگ های متنوعی ارائه کرده است که می توان از آنها برای مقدار دهی به پارامتر های endAudio ,mainAudio  استفاده کرد.

دانلود فایل های پلاگین elevator.js

حجم: 700.63 کیلو بایت

 

نوشته شده توسط شهربانو دوستی
بازدید: 12641