راهنمای کامل افکت پارالکس در وردپرس و المنتور

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

اگه یک طراح وب هستی، در طراحی سایتهای مختلف مخصوصا یک سایت تجارت الکترونیک دلت میخواد خلاقیت به خرج بدی تا برای کاربران بازدید از سایت جذاب باشه و در نهایت یک خرید انجام بدن.

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

در این راهنما من برای شما انواع افکتهای پارالکس طراحی سایت رو توضیح میدم و راههایی ارائه میدم که بتونین راحتتر در سایتتون اجرا کنین.

افکت پارالکس چیست؟

افکت پارالکس یک ویژگی طراحی بسیار محبوبه که معمولاً در وب سایت های وردپرسی استفاده میشه. به طور خلاصه، این افکت یک اثر پیمایشه که تصاویر پس زمینه کندتر از عناصر پیش زمینه حرکت میکنن و باعث یک توهم سه بعدی رو در یک فضای دو بعدی  میشه.

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

چرا از افکت پارالکس در طراحی سایت استفاده کنیم؟

بهبود تجربه کاربری

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

کاهش نرخ پرش یا بانس ریت

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

افزایش انگیجمنت

افکتهای پارالکس فضای جذابی رو ایجاد میکنن که گاها کاربر دی این افکت غوطه ور میشه انگار که اون افکت پارالکس داستانی رو براش بازگو میکنه. اینطوری کاربران با سایت درگیر میشن.

المنتور پرو به کمکتون میاد تا از انواع مختلف جلوه های Parallax با سهولت و مطلقاً بدون نیاز به برنامه نویسی استفاده کنین.

انواع افکت پارالکس وردپرس

جلوه های پارالکس مبتنی بر یکی از این دو عنصره:

• افکتهای پیمایش پارالکس بر اساس پیمایش اسکرول در صفحه
• افکتهای پیمایش پارالکس بر اساس حرکت ماوس کاربر

افکتهای پارالکس بر اساس اسکرول

پارالکس پیمایش در پس زمینه

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

افکت پارالکس اسکرول عمودی

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

افکت پارالکس اسکرول افقی

پرواز یک شاتل به وسط صفحه با استفاده از یک پیمایش افقی صفحه کسل کننده سایت رو بسیار جذاب نشون میده.

افکت پارالکس اسکرول شفافیت

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

افکت پارالکس محو

وقتی به پایین اسکرول میکنی، میتونی موضوعی رو محو کنی. متنی، سربرگی. فقط با عصبانیت دوباره به عقب برنگرد!

افکت پارالکس چرخش

این ویدئوی فضانورد بهترین مثال برای افکت پارلکس چرخشه.

افکت پارالکس تغییر اندازه

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

و یکی دیگه

افکتهای پارالکس بر اساس حرکت ماوس

خب حالا بریم ببینیم چه افکتهای پارالکسی با حرکت ماوس میتونیم داشته باشیم.

افکت پارالکس رد پای ماوس

به عناصر صفحتون میتونین افکتی بدین که بر اساس ردیابی حرکت ماوس باشه و در افزونه المنتور میتونین براحتی سرعتشون رو هم تنظیم کنین. آموزش افکت حرکت ماوس المنتور رو هم ببینین.

افکت پارالکس شیب سه بعدی

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

یک مثال دیگه:

اضافه کردن افکت پارالکس بصورت دستی

در این روش برای اضافه کردن افکتهای پارالکس به سایت وردپرس، لازمه که مهارت کدنویسی HTML و CSS بالایی داشته باشین. برای مبتدیان توصیه نمیشه.  همچنین گزینه های پارالکس شما رو محدود میکنه.

نحوه انجام کار به این صورته:

• تصویری رو که میخواین برای اثر پارالکس در وردپرس استفاده کنین، بارگذاری کنین.
• URL تصویر رو از کتابخانه رسانه وردپرس کپی کنین.
• کد زیر رو اضافه کنین:

.parallax {

background-image: url(“image URL.jpg”);

Height: (xxx)px;

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

<div class=”parallax”></div>

خب واضحه که این بهترین روش نیست.

اضافه کردن افکت پارالکس با استفاده از پلاگین

پلاگین های زیادی وجود دارن که اضافه کردن پارالکس به وب سایت وردپرس رو آسون میکنن. Essential ادآن المنتور، ScrollMagic، افزونه Kreatura Slider برای وردپرس، Advanced WordPress Backgrounds, Parallax Image و …

بعضیاشون هم به یک کدنویسی جزئی نیاز دارن.

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

یا ScrollMagic رو باید به کتابخونه اصلی در فایل HTML اضافه کنین، بعد امکان اعمال تغییر کد وجود داره. مثل کد زیر:

// init controller

var controller = new ScrollMagic.Controller();

// create a scene

new ScrollMagic.Scene({

duration: 100, // the scene should last for a scroll distance of 100px

offset: 50 // start this scene after scrolling for 50px

})

.setPin(‘#my-sticky-element’) // pins the element for the the scene’s duration

.addTo(controller); // assign the scene to the controller

اضافه کردن افکت پارالکس با المنتور

برسیم به راحت ترین راه ایجاد افکت پارالکس که با المنتور خودمونه. یک روش بصری و بسیار آسون. در افزونه المنتور پرو  دو روش برای ایجاد افکتهای پارالکس وجود داره:

• افکت پارالکس بر اساس عناصر سایت
• افکت پارالکس پس زمینه

افکتهای پارالکس بر اساس عناصر سایت

گام اول: انتخاب یک المان و اضافه کردن پارالکس

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

گام دوم: انتخاب Scrolling Efect در افکتهای متحرک

در تب پیشرفته، روی کشویی افکتهای متحرک المنتور کلیک کرده و سپس Scrolling Effects رو فعال کنین. حالا میتونین هر کدوم از 6 انیمیشن رو که دلتون میخواد انتخاب کنین.

گام سوم: انیمیشن رو مطابق نیازتون تنظیم کنین

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

برای هر افکت، میتونین جهت، سرعت و ویوپورت رو تنظیم کنین که موقع شروع انیمیشن و زمان پایان اون کنترل میشه.

علاوه بر این، میتونین مقیاس ویوپورت رو که در چه بخشی از پیمایش تأثیرش شروع بشه و کی تموم بشه رو تنظیم میکنین.

تنظیمات ویوپورت در المنتور رو در این درس میتونین مشاهده کنین. درس سربرگ متحرک با افکت حرکت ماوس المنتور هم جالبه.

گام چهارم: بیشتر از یک انیمیشن برای هر المان انتخاب کنین

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

برای موقعیت چرخش و تغییر مقیاس میتونین نقاط لنگر “X” و “Y” رو تنظیم کنین که محور اطراف اونرو تغییر میده.

گام پنجم: اضافه کردن ردیابی ماوس و شیب سه بعدی

این مورد فقط در کامپیوترها وب کار میکنه چون با حرکت ماوسه. مثلا میخواین با حرکت ماوس ستاره ها هم حرکت کنه.

اینجا دو تا گزینه داریم: افکت ردیابی با حرکت ماوس که با حرکت ماوس، ویجت هم حرکت میکنه و شیب سه بعدی که با حرکت ماوس المان رو کج میکنه

گام ششم: انتخاب دستگاههای موردنظر برای پارالکس

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

افکتهای پارالکس بر اساس پس زمینه

گام اول: در ویرایشگر المنتور روی بخش صفحه کلیک کنین

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

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

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

گام سوم: از گام سوم تا ششم قسمت قبل رو تکرار کنین

دقیقا همون افکتها رو داره فقط الان رو پس زمینه ست.

افکتهای پارالکس رو به سایتت با استفاده از صفحه ساز المنتور اضافه کن

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

خرید المنتور پرو

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

دموی آماده المنتور