آموزش کار با افزونه کمکی Before After در ورژن ۶ اسلایدر رولوشن

در این آموزش قصد داریم به صورت اختصاصی نحوه نصب و فعال کردن و تنظیمات افزونه کمکی Before After را که دو تصویر را بصورت نمای گرافیکی قبل و بعد از هم در یک اسلاید مقاییسه می کند و 2 قابیلت کشیدن و نمایش دادن است را نیز دارد، در افزونه slider revolution  به شما آموزش دهیم.

 

تنظیمات افزونه کمکی before after

حرکت بین نماها

بین 2 عکسی که قرار است در یک اسلاید مقایسه شوند سوئیچ می شوید

 

تنظیمات افکت

آیکن ها

آیکن های فلش مانند به منظور ایجاد اهرم های عمودی و یا افقی کشش عکس در دسترس هستند، یکی را می توانید از میان آن ها انتخاب کنید (منظور از آیکن کشش یا کشیدن عکس همان فلش یا arrow  است که در قسمت وسط مقایسه دو تصویر به ما علامت می دهند که دو عکس را می تواند با کشیدن و رها کردن مقایسه کرد)

 

 

 

1. اندازه آیکن
   اندازه فونت آیکن فلش کشیدن عکس
2. فضای بین آیکن
   فضای بین آیکن های کشیدن به پیکسل
3. رنگ آیکن
   رنگ آیکن کشیدن
4. سایه برای آیکن
   با کدد css میتواندی برای آیکن کشیدن سایه بزنید
5. محو کردن سایه
   میزان بلور شدن سایه آیکن کشیدن
6. رنگ سایه
   رنگ سایه آیکن کشیدن

 

 

 

خط جدا کننده

1. ضخامت خط
   ضخامت خط جدا کننده به پیسکل
2. رنگ خط
   رنگ خط جدا کننده
3. سایه خط
   کد css برای انداختن سایه زیر خط
4. بلور سایه
   میزان بلور شدن سایه خط
5. رنگ سایه
   رنگ سایه خط جدا کننده

 

 

متحرک سازی

1. متحرک سازی با کلیک روی صحنه اسلاید
   خط جدا کننده به جای از قبل تنظیم شده خودش بعد از کلیک شدن روی افکت مقایسه می رود
2. مدت زمان
   مدت زمان اجرای انیمیشن بعد از کلیک
3. ظاهر شدن و پاک شدن متحرک سازی
   شما میتوانید تظیمات حالت ظاهر شدن انیمیشن و ناپدید شدن آن را از انیجا تنظیم کنید
4. نشانگر موس
   نشانگر css موس هنگام کشیدن شدن موس روی افکت ظاهر میشود

 

 

 

جعبه محتوی فلش کشیدن یا drag arrow

منظور از جعبه همان container  می باشد که فلش یا arrow  درون آن قرار می گیرد

1. حاشیه
   دادن حاشیه به جعبه محتوی فلش کشیدن
2. حجم کادر دور
   حجم کادر دور css به جعبه محتوی فلش کشیدن
3. رنگ پس زمینه
   رنگ پس زمینه جعبه محتوی فلش کشیدن
4. دور
   یک دور رنگ اختیاری برای جعبه محتوی فلش کشیدن
5. ضخامت کادر دور
   ضخامت کادر دور جعبه فلش کشیدن
6. رنگ دور
   رنگ دور جعبه فلش کشیدن
7. سایه
   سایه css برای جعبه فلش کشیدن
8. بلور سایه
   بلور کردن سایه دور جعبه فلش کشیدن
9. شدت سایه
   شدت سایه برای جعبه فلش کشیدن
10. رنگ سایه
    رنگ سایه برای جعبه فلش کشیدن

 

پس زمینه اسلاید

انتخاب پس زمینه برای دو نمای قبل و بعد

تنظیمات کلی افزونه کمکی before after

 

1. فعال
   افزونه before/after  را برای این اسلاید فعال می کند
2. جهت
   حالت مقایسه را می تواندی کنار هم و یا روی هم کنید
3. نقطه تلاقی
   نقطه که عکس شما نصف می شود

 

شروع و پایان انیمیشن

1. تاخیر
   می توانید نمای مقایسه را کمی با تاخیر بیاورید
2. طول زمان
   کل زمانی که انیمیشن برای نمایش مقایسه اجرا می شود
3. ظاهر شدن و پاک شدن متحرک سازی
   شما میتواندی تظیمات حالت ظاهر شدن انیمیشن و ناپدید شدن ان را از انیجا تظنیم کنید
4. انیمیشن هنگام اتمام اسلاید
   می توانید یک انیمیش دیگر را در هنگام تغییر این اسلاید به بعدی به مقایسه خود بدهید

 

تنظیمات تیزر

1. انیمیشن تیزر
   دور بی نهایت
   فلش ها را دائما متحرک می کند
   در اولین نمایش مقایسه
   فلش های را کوتاه بعد از نمایش مقایسه حرکت می دهد
   تا اولین گرفته شدن توسط موس کاربر
   فلش ها را تا اولین کلیک کاربر بر روی  مقایسه ،  متحرک می کند
2. نوع انیمیشن
   دو حالت انمیشن دفع و یا جذب را به فلش می دهد
3. فاصله
   میزان فاصله ای که دو فلش در هنگام متحرک سازی شدن از هم دور می شوند
4. سرعت
   کل مدت زمان انیمیشن
5. ظاهر شدن و پاک شدن متحرک سازی
   شما میتواندی تظیمات حالت ظاهر شدن انیمیشن و ناپدید شدن ان را از انیجا تظنیم کنید
6. تاخیر
   تاخیری را به انیمشن قبل از اینکه شروع شود می دهید

تنظیمات فلش ها

1. Transition فلش ها
   با فعال سازی این گزینه این افکت در هنگام رفتن موس روی فلش به فلش داده میشود
2. Shift offset
   میزان به پیکسل که فلش ها در هنگام متحرک سازی از هم جدا می شوند
3. سرعت
   کل زمان انیمیشن به میلی ثانیه
4. ظاهر شدن و پاک شدن متحرک سازی
   شما میتواندی تظیمات حالت ظاهر شدن انیمیشن و ناپدید شدن ان را از انیجا تظنیم کنید
5. تاخیر
   تاخیری را به انیمشن قبل از اینکه شروع شود می دهید

تنظیمات لایه ها

میتوانید از قسمت ویرایش اسلاید ها و بخش لایه های آن ها ، تنظیم کنید که کدام لایه بعنوان before  باشد و کدام لایه بعنوان after  (در نمای مقایسه)

لایه ها بعد از این کار  2 مارک b  و a بخود میچسبانند  (در قسمت تایم لاین) و آیکنک چشمی که یک خط رویش کشیده شده نشان می دهد که شما در حال ویرایش کدام یک از لایه های هستید.