آموزش ویژگی و قابلیت On Scroll در ورژن ۶ افزونه اسلایدر رولوشن

افزونه اسلایدر رولوشن وردپرس

تو این آموزش قصد داریم قابلیت و افکت On Scroll رو در ورژن ۶ افزونه اسلایدر رولوشن به شما یاد بدیم و تنظیمات مربوط به این ویژگی رو با هم بررسی کنیم.

با استفاده از ویژگی On Scroll شما میتونید به محتواهای درون اسلایدر خود یک انیمیشن خاص در زمان اسکرول صفحه بدید.

 

تنظیمات ویژگی On Scroll

ویژگی on scroll

در تصویر بالا و بخشی که مشخص شده، جاییه که شما به تنظیمات ویژگی On Scroll دسترسی خواهید داشت.

تو این بخش شما میتونید ویؤگی On Scroll برای اسلایدر و برای لایه های مختلف تعریف کنید.

 

Parallaxویژگی parallax برای لایه ها

  1. Parallax Enabled
    فعال کردن ویژگی Parallax برای تصویر پس زمینه اسلاید
  2. ۳D Effects Enabled
    فعال کردن ویژگی افکت های ۳ بعدی برای تصویر بک گرند و لایه های محتوای آن
  3. Disable on Mobil
    اینجا تعیین میکنید که افکت پارالاکس و ۳ بعدی برای گوشی های موبایل فعال نباشد
  4. Triggered by
    اینجا تعیین میکنید که آیا افکت باید زمانی که پیج اسکرول میشود اتفاق بیفتد و یا وقتی که موس حرکت میکند
  5. Parallax Origin
    نقطه پایه ای که بر اساس آن افکت ها اعمال میشوند. انتخاب گزینه “Mouse Enter” باعث میشود که افکت از نقطه ای که موس وارد صفحه میشود اعمال شود، همچنین انتخاب “Slider Center” نقطه پایه افکت را از وسط صفحه حساب میکند
  6.  BG Speed
    سرعت حرکت تصویر پس زمینه
  7. Layers Speed
    سرعت حرکت لایه های اسلایدر

 

 

Timeline

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

Timeline Scroll based
فعال کردن ویژگی تغییر خط زمانی با اسکرول صفحه

  1. Easing
    نوع انیمیشن مورد نظر شما
  2. Speed
    سرعت حرکت تایم لاین بر اساس اسکرول صفحه
  3. Fix During Scroll
    با فعال کردن این گزینه، صفحه تا زمانی که پخش Timeline به پایان نرسد در یک وضعیت ثابت باقی م یماند.
  4. Fix During Scroll
    تعیین نقطه شروعی که صفحه باید در آن نقطه در یک وضعیت ثابت باقی بماند (زمانی که اسکرول صفحه به آن نقطه برسد)
  5. Module Fixed Until
    نقطه ای که از آن به بعد صفحه به صورت نرمال اسکرول شود
  6.  Layers
    این افکت بر روی تمام لایه ها به صورت پیش فرض فعال شود

 

 

 

 

Effects

تو این بخش میتونید افکت هایی مثل Fade, Grayscale و افکت محو شدن یا Blur را به اسلایدر و لایه های اون بدید.

تظیمات Effects در اسلایدر رولوشن وردپرس

  1. Scroll based Effects
    فعال کردن این افکت برای اسلایدر
  2. Fade
    زمانی که صفحه اسکرول میشود، محتوا های شما هم یک افکت Blur و محو شدگی رو میگیرن
  3. Grayscale
    زمانی که صفحه اسکرول میشود محتواهای شما از رنگ سیاه به سفید در میایند
  4. Blur
    یک افکت CSS Blur به محتواهای شما در زمان اسکرول اضافه میشود
  5. Max Blur Strength
    حداکثر مقدار افکت محو شدگی و Blur
  6. Layers default Enabled
    فعال کردن افکت برای لایه ها به صورت پیشفرض
  7. Slide default Enabled
    فعال کردن افکت برای لایه ها به صورت پیشفرض
  8. Direction
    تعیین جهتی که باید افکت ها طبق آن اعمال شوند
  9. Disable Mobile
    غیرفعال کردن افکت ها بر روی موبایل
  10. Offset (Tilt) Effect
    با این گزینه تعیین میکنید که فقط زمانی که این درصد از اسلایدر اسکرول شد افکت ها اعمال شوند
  11. Factor on BG’s
    میزان تاثیر افکت ها بر روی بک گرند اسلایدر
  12. Factor on Layers
    میزان تاثیر افکت ها بر روی لایه های اسلایدر

 

 

 

 

تنظیمات اسلایدر

تنظیمات اسلاید در On Scrollتنظیمات اسکرول اسلایدر وردپرس در On Scroll

 

 

 

 

  1. BG 3D Depth
    مقداری که این افکت باید بر روی بک گرند اصلی اسلاید اعمال شود
  2. Fade, Blur & Grayscale
    گزینه های ۲ و ۳ و ۴ در تصویر روبه رو بر اساس تنظیمات تعریف شده برای اسکرول اسلایدر، افکت های Fade و Blur و Grayscale که بالاتر راجع بهشون توضیحاتی ارائه شد رو ایجاد میکنه.

 

 

 

 

 

تنظیمات لایه های اسلایدر

تنظیمات لایه های اسلایدرتنظیمات لایه های اسلایدر در On Scroll

 

  1. Parallax & 3D Level
    میزان افکت Parallax و سه بعدی که باید بر روی لایه ها اعمال شود
  2. Under Mask
    یک افکت mask (مشابه چیزی که در فتوشاپ داریم و لایه ها رو mask میکنیم) بر روی لایه ها اعمال میشود، بنابراین وقتی که لایه ها جابجا شوند این لایه ها هیچگاه از mask تعریف شده خارج نمیشوند
  3. Attach to BG
    جابجایی لایه ها با جابجایی بک گرند اسلاید هماهنگ خواهد بود
  4. Timeline/Filter Scroll Based Handling
    مورد ۴ و ۵ به شما این امکان رو میدن که جابجایی لایه ها رو بر اساس تنظیماتی که برای اسکرول اسلایدر تعریف کردید جابجا شوند
    با انتخاب “Default” تنظیمات پیشفرض اسلایدر اعمال میشود، انتخاب “Enabled-Scroll Based” افکت ها را زمانی که صفحه اسکرول میشود اعمال میکند
    انتخاب “Disabled – Time Based ” افکت خط زمانی را برای آن ها فعال میکند

 

 

 

 

 

به این آموزش چه امتیازی می دهید؟

میانگین امتیاز ۴٫۸ / ۵٫ تعداد آرا: ۶

نیما فرجی
نیما فرجی
به نظر من آموزش بهترین روش برای تبدیل کردن دنیا به جای بهتری برای زندگی هست. برای همین یاد میگیرم و هر چی یاد گرفتم رو به بقیه یاد میدم!

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

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