ایجاد افکت با اسکرول کردن در سایت

scrollme : پلاگین jQuery برای ایجاد افکت در زمان اسکرول

آیا قصد ایجاد افکت با اسکرول کردن در سایت خود را دارید ؟

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

از مزیت های این قابلیت میتوان به : زیباتر شدن سایت و درامدن از حالت معمولی و همچنین کاربر پسند تر کردن آن اشاره نمود.

امید که این آموزش که منبع آن در انتهای مقاله ذکر شده است ، مفید واقع شود.

 

scrollme : پلاگین jQuery برای ایجاد افکت در زمان اسکرول

در این مطلب میخوام یک پلاگین jQuery بنام scrollme رو خدمت شما معرفی کنم و اونو آموزش بدم.

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

میبینید که تعدادی div قرار داره و وقتی که به سمت پایین اسکرول میکنید با افکتهای مختلفی ظاهر و مخفی میشن.

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

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

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

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

۶ تا div قرار دادم و برای هر کدام رنگی انتخاب کردم. خوبی این پلاگین اینه که میشه کاری کرد که لازم نباشه کد Javascript نوشت و با استفاده از HTML میتونین راهش بندازین. اولین کاری که باید بکنید اینه که دو کلاس scrollme و animateme رو به div ها اضافه کنید. بصورت زیر :

با اینکار به این ابزار میگیم که میخوایم روی این المنتها افکت انجام بشه.

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

  • data-when : مشخص میکنه که این افکت مورد نظر ما چه زمانی باید اتفاق بیوفته. سه مقدار enter و exit و span رو قبول میکنه. اگر enter بزارید ، این افکت زمانی اجرا میشه که شما به سمت اون المنت اسکرول کنید و بالای اون المنت بخواد نمایش داده بشه. اگر exit بزارید ، این افکت زمانی اجرا میشه که پایین اون المنت در دیدرس قرار بگیره.
  • data-from : با استفاده از این ویژگی و data-to میتونین انیمیشن رو برعکس کنید و حتی زمان اجراشو کم و زیاد کنید ، عددی بین ۰ تا ۱ میتونین براشون قرار بدین
  • data-easing : با استفاده از این خاصیت میتونین نوع انیمیشن رو مشخص کنید. چهار حالت easeout و easein و easeinout و linear رو قبول میکنه.
  • data-opacity : میتونین شفافیت المنت مورد نظر رو زمانی که به موقعیت to میرسه مشخص کنید. عددی بین ۰ تا ۱ میتونین قرار بدین
  • scale – saclex – scaley – scalez : میتونین با استفاده از اینا سایز المنت رو تغییر بدین
  • rotatex – rotatey – rotatez : میتونین با استفاده از این موارد المنت رو بچرخونید
  • translatex – translatey – translatez : با استفاد از این موارد هم میتونین المنت رو در جهات مختلف جابجا کنید

یک نمونه که همه موارد بالا در اونا قرار گرفته :

حالا میتونین موارد رو تغییر بدین و اثر هر کدوم رو تست کنید.

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

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

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

2 thoughts on “ایجاد افکت با اسکرول کردن در سایت”

  1. ببخشید ایجاد افکت با اسکرول کردن در سایت چه فایده ای میتونه داشته باشه ؟

    1. ضمن سپاس از همراهی شما ، همان طور که متن نیز اشاره شده است : از مزیت های این قابلیت میتوان به : زیباتر شدن سایت و درامدن از حالت معمولی و همچنین کاربر پسند تر کردن آن اشاره نمود.
      ضمنا افکت های نمایشی باعث جلب توجه بیشتر بازدید کنندگان میگردد که وب مستران می توانند جهت تاثیر گذاری مطالب مهم خودشان ، از این افکت ها بر روی آنان بهره بگیرند.
      نمونه ی افکت گذاری را در همین سایت مجموعه داده پرداران در پست های نمونه کار می توانید ببینید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *