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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

2 1571 ۲۳ اردیبهشت ۹۴

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

scrollme

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • ‏‏
    hamed najjari(۱۳ اسفند ۱۳۹۴)

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

    • ‏‏
      محمد اسفندیاری(۱۴ اسفند ۱۳۹۴)

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram