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

- visibility ۸ mode_comment

در این مطلب میخوام یک ابزار زیبا بنام elevator رو خدمت شما معرفی کنم و اونو آموزش بدم.

 

elevator

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

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

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به elevator.min.js نیاز داریم. این فایل رو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

اولین کاری که باید بکنیم ، اینه که محتویاتمون رو قرار بدیم ، تا سایتمون دراز و طولانی بشه ، بصورت زیر :

در انتها هم یک دکمه قرار میدم و کلاس elevator-button رو به اون نسبت میدم ، بصورت زیر :

حالا استایلهای CSS کمی رو برای اونا قرار میدم :

اولین کاری که میکنیم ، باید در تگ اسکریپت نهایی یک نمونه از شئ Elevator بسازیم ، بصورت زیر  :

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

ساختار کلی بصورت زیر هست :

این 4 تا ویژگی مهمترین ویژگی های این ابزار هستن و کارتون با همین 4 تا راه میوفته :

  • element : آدرس همون دکمه برگشت به بالا رو در اینجا قرار میدیم
  • mainAudio : آدرس همون موزیک اصلی رو قرار بدین
  • endAudio : آدرس موزیکی که در انتها پخش میشه
  • duration : مدت زمانی که طول میکشه به بالا اسکرول بشه و پایان بیابد. من در دمو 40000 قرار دادم که به معنای 40 ثانیه هست. بخاطر درک بهتر شما اینکارو کردم

شما میتونین از دو ویژگی که مربوط به آهنگ هستن استفاده نکنید و فقط از ویژگی های اول و آخر استفاده کنید. با اینکار شبیه به بقیه دکمه های برگشت به بالای معمولی خواهد بود.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران
Abbas412

خیلییییی جالب بود
مرسیی ❓ ❓ ❓

محمد اسفندیاری

خوشحالم که خوشتون اومده
موفق باشید

hassani

خیلی خیلی جالب بود.تشکر

محمد اسفندیاری

خواهش میکنم دوست عزیز

افشین زندی

خیلی جالب بود.ممنون آقای اسفندیاری

محمد اسفندیاری

خواهش میکنم دوست عزیز
موفق باشید

sadaf

ممنون خیلی قشنگ بود. ❓

محمد اسفندیاری

خواهش میکنم دوست عزیز

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.