• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

8 1756 ۱۴ اردیبهشت ۹۴

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

 

elevator

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    افشین زندی(۱۶ اردیبهشت ۱۳۹۴)

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

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram