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

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

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

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

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

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

Parallax

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

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 را به اسلایدر و لایه های اون بدید.

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
    میزان تاثیر افکت ها بر روی لایه های اسلایدر

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

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

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

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