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

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

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

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

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

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

 

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 نظر

    1. مدیر

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

      پاسخ

شما هم در بحث شرکت نمایید...

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