سبد (0)

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

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

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 : آدرس دکمه برگشت به بالا .
  • mainAudio : آدرس آهنگ اصلی (آهنگی که در هنگام حرکت به بالا پخش می شود.)
  • endAudio : آدرس آهنگی که در انتهای حرکت (هنگام رسیدن به ابتدای صفحه) پخش می شود.
  • duration : مدت زمانی است که اسکرول کردن به سمت بالا طول می کشذ. (بر حسب میلی ثانیه)

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

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

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

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

 

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

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

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