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

اضافه کردن افکت در المنتور
Share on twitter
Share on facebook
Share on telegram
Share on whatsapp
Share on email

چکیده مقاله

احتمالاً شما هم دوست دارید که صفحاتی که ایجاد می کنید جذابیت و زیبایی خاصی داشته باشد تا نظر بازدید کنندگان را به خود جلب کند.برای پاسخ به این نیاز شما می توانید از امکان اضافه کردن افکت در المنتور استفاده کنید تا پایان این مقاله آموزش افزونه المنتور با همراه باشید تا به صورت کامل این ویژگی را فرا بگریم.

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

افکت های شناور را می توان روی ابزارک ها، ستون ها و هر بخش دیگری اعمال کرد و روی آن ها تغییرات نا محدودی ایجاد کرد.
هر کجا که شما دکمه های عادی – Normal و هاور – Hover  را مشاهده کردید ، گزینه های اضافه کردن افکت های شناور هم در اختیار شما قرار می گیرد. کافی است روی بخش مورد نظر کلیک کرده و در این دو قسمت تغییرات را اعمال کنید.

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

افکت های ماوس – مسیر ماوس

با این امکان افکت المنتور می توانید عناصر موجود در صفحه را طوری تنظیم کنید تا با حرکت ماوس بازدید کننده، افکت های خاصی روی عناصر اجرا شوند.
برای اینکار ابتدا قسمت مورد نظر را انتخاب کرده و به مسیر پیشرفته – Advanced >موشن افکت – Motion Effects بروید سپس:

  1.  افکت موس – Mouse Effects را در حالت روشن- ON قرار بدهید.
  2. روی آیکون مداد مسیر ماوس – Mouse Track کلیک نمایید.
  3. مسیر حرکت – Mouse Track: یک گزینه در مقابل – Opposite یا مستقیم – Direct را انتخاب نمایید. گزینه در مقابل عنصر را در خلاف حرکت ماوس حرکت می دهد و و گزینه مستقیم عنصر را در همان جهت ماوس حرکت می دهد.
  4. سرعت – Speed: سرعت حرکت را از بین 0 تا 10 تنظیم کنید.
  5. اعمال افکت روی -Apply Effects On :برای اجرا شدن افکت در دسکتاپ، تبلت و موبایل، نوع دستگاه ها را در این قسمت وارد کنید.
  6. جلوه های نسبی – Effects Relative To: برای انتخاب صفحه پیش فرض گزینه Viewport  یا Entire Pageرا انتخاب نمایید.

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

 نکته: در صورتی که در مرورگر سافاری – Safari افکت های ماوس را مشاهده نمی کنید یا مشکل ناپدید شدن عناصر را دارید این به این خاطر است که از نسخه قدیمی جی کوئری استفاده می کند که توسط وردپرس پشتیبانی نمی شود. برای رفع این مشکل می توانید یا افکت های حرکتی روی ابزارک ها را حذف نمایید یا افکت های که هم زمان افکت اسکرول و افکت ماوس روی آن فعال است را حذف نمایید.

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

نوعی دیگر از افکت در المنتور، افکت اسکرول است که با استفاده از آن می توانید در صفحه بر روی عناصر افکت های اعمال کنید تا با اسکرول کردن عمودی بازدید کننده در صفحه افکت های در جهت و سرعت تعین شده اجرا شوند که این خود جذابیت نمایش عناصر را به مقدار زیادی بالا می برد.
برای دسترسی به این امکان در پنل کناری صفحه به مسیر پیشرفته – Advanced > موشن افکت – Motion Effects بروید سپس:

  1.  افکت اسکرول – Scrolling Effects را روی حالت روشن – ON قرار دهید.
  2.  روی آیکون مداد اسکرول عمودی – Vertical Scroll کلیک نمایید.
  3. مسیر حرکت – Direction: جهت اسکرول کردن را روی حالت بالا یا پایین قرار بدهید.
  4. سرعت – Speed: سرعت اجرای افکت را از 0 تا 10 تنظیم کنید.
  5. Viewport : با استفاده از این گزینه تعین کنید که برای اجرای افکت چه میزان از ارتفاع قابل مشاهده صفحه دستگاه باید اسکرول شود. به عنوان مثل اگر Viewport روی 50% تا 100% تنظیم شده باشد افکت بعد از اسکرول کردن نیمی از ارتفاع نمایشی صفحه اجرا می شود.
  6.  اعمال افکت روی -Apply Effects On :برای اجرا شدن افکت در دسکتاپ، تبلت و موبایل، نوع دستگاه ها را در این قسمت وارد کنید.
  7.  جلوه های نسبی – Effects Relative To: برای انتخاب صفحه پیش فرض گزینه Viewportیا Entire Pageرا انتخاب نمایید.

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

نکته : توجه داشته باشید که میزان درصد اسکرولی که در قسمت Viewport تنظیم می کنید باید با توجه به ارتفاع دید (اندازه قابل مشاهده در صفحه ) باشد نه به اندازه کل صفحه ای که شما ساختید. این حالت برای تمامی موارد بجز بخش های که موقعیت آن ثابت است درست کار می کند. برای درک این موضوع تصویر زیر را مشاهده فرمایید.

افکت اسکرول کردن – تغیر شفافیت

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

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

 

برای اینکار به مسیر پیشرفته – Advanced > موشن افکت – Motion Effects بروید سپس :

  1.  افکت اسکرول – Scrolling Effects: را روی حالت فعال قرار بدهید.
  2.  شفافیت – Transparency: روی آیکون مداد ویرایش کلیک نمایید.
  3. مسیر حرکت – Direction: یکی از چهار حالت مختلف شفافیت را انتخاب کنید.
  4. Fade In: در این نوع در هنگام شروع عنصر به حالت شفاف نمایش داده می شود و به تدریج قابل مشاهده تر می شود.
  5. Fade Out: در این نوع در هنگام شروع عنصر به حالت کامل نمایش داده می شود و به تدریج شفافیت آن بیشتر می شود.
  6. Fade Out In: در این نوع هنگام شروع به حالت کامل نمایش داده می شود سپس میزان شفافیت آن بیشتر می شود و در آخر دوباره به صورت کامل نمایش داده می شود.
  7. Fade In Out: در این نوع هنگام شروع به حالت شفاف نمایش داده می شود سپس میزان نمایانی آن بیشتر می شود و در آخر دوباره به صورت کامل شفاف می شود.
  8. سطح – Level: میزان شفافیت را در بین 0 تا 10 تنظیم کنید.
  9. Viewport: با استفاده از این گزینه تعین کنید که برای اجرای افکت چه میزان از ارتفاع قابل مشاهده صفحه دستگاه باید اسکرول شود.

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

افکت اسکرول کردن – تغیر مقیاس

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

scale
برای اینکار به مسیر پیشرفته – Advanced > موشن افکت – Motion Effects بروید سپس :

  1.  افکت اسکرول – Scrolling Effects: را روی حالت فعال قرار بدهید.
  2. مقیاس – Scale: روی آیکون مداد ویرایش کلیک نمایید.
  3. مسیر حرکت – Direction: یکی از چهار حالت مختلف را انتخاب کنید.
  4. سرعت – Speed: میزان سرعت اجرای مقیاس را در بین 0 تا 10 تنظیم کنید.
  5. Viewport : با استفاده از این گزینه تعین کنید که برای اجرای افکت چه میزان از ارتفاع قابل مشاهده صفحه دستگاه باید اسکرول شود.
  6. X Anchor Point: موقعیت محور افقی را در یکی از حالت های راست، مرکز یا چپ قرار دهید تا مقیاس از آن موقعیت تغییر کند.
  7. y Anchor Point: موقعیت محور عمودی را در یکی از حالت های راست، مرکز یا چپ قرار دهید تا مقیاس از آن موقعیت تغییر کند.
  8. اعمال افکت بر روی – Apply Effects On: دستگاه های (موبایل، تبلت، دسکتاپ) که می خواهید افکت در آن ها اجرا شود را وارد نمایید.
  9. Effects Relative To: یکی از گزینه های Default, Viewport, or Entire Page را انتخاب کنید.

اضافه کردن افکت در المنتور - افکت مقیاس

افکت اسکرول کردن – چرخش

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

افکت اسکرول کردن – چرخش
برای اینکار به مسیر پیشرفته – Advanced > موشن افکت – Motion Effects بروید سپس :

  1. افکت اسکرول – Scrolling Effects: را روی حالت فعال قرار بدهید.
  2. چرخش – Rotate: روی آیکون مداد ویرایش کلیک نمایید.
  3. مسیر حرکت – Direction: یکی از چهار حالت مختلف را انتخاب کنید.
  4. سرعت – Speed: میزان سرعت اجرای مقیاس را در بین 0 تا 10 تنظیم کنید.
  5. Viewport: با استفاده از این گزینه تعین کنید که برای اجرای افکت چه میزان از ارتفاع قابل مشاهده صفحه دستگاه باید اسکرول شود.
  6. X Anchor Point: موقعیت محور افقی را در یکی از حالت های راست، مرکز یا چپ قرار دهید تا مقیاس از آن موقعیت تغییر کند.
  7. y Anchor Point: موقعیت محور عمودی را در یکی از حالت های راست، مرکز یا چپ قرار دهید تا مقیاس از آن موقعیت تغییر کند.
  8. اعمال افکت بر روی – Apply Effects On: دستگاه های (موبایل، تبلت، دسکتاپ) که می خواهید افکت در آن ها اجرا شود را وارد نمایید.
  9. Effects Relative To: یکی از گزینه های Default, Viewport, or Entire Page را انتخاب کنید.

افکت اسکرول کردن – چرخش

افکت اسکرول کردن – بلور
افکت بلور – Blur باعث می شود که به تدریج عناصر با اسکرول کردن بازدیدکننده تارتر می شوند. به عنوان مثال در تصویر زیر با اسکرول کردن به پایین تصویر به مرور تار می شود. تنظیمات این قسمت مانند مرحله قبل است با این تفاوت که باید روی آیکون مداد ویرایش بلور – Blur کلیک نمایید.

اضافه کردن افکت در المنتور - چرخشی

انیمیشن هنگام ورود در المنتور

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

انیمیشن هنگام ورود در المنتور

  1. روی دسته ابزارک، ستون یا بخش کلیک راست کرده و گزینه ویرایش را انتخاب نمایید
  2. به تب پیشرفته – Advanced > موشن افکت – Motion Effects بروید.
  3.  از قسمت کشویی گزینه انیمشین هنگام ورود – Entrance Animation یک انیمیشن را انتخاب کنید. توجه داشته باشید که برای دستگاه های که می خواهید اجرای انیمیشن در آن غیر فعال باشد پس از انتخاب نوع دستگاه، حالت انیمشین را روی هیچ – None قرار بدهید.

برای این بخش 37 انیمشین مختلف ارائه شده است که عبارتند از:

  1. Fading: انیمشین محو شدن در بالا، پایین، چپ و راست
  2.  Zooming: انیمشین بزرگ نمایی به بالا، پایین، چپ و راست
  3. Bouncing:انیمشین جهش از بالا، پایین ، راست یا چپ
  4. Sliding: انیمشین اسلاید از بالا، پایین ، راست یا چپ
  5. Rotating: انیمیشن چرخش از پایین چپ، پایین راست، بالا راست یا بالا چپ
  6. Attention seekers: در زیر مجموعه این قسمت هم انیمشین های Bounce, flash, pulse, rubber band, shake, head shake, swing, tada, wobble, jello وجود دارد.

افکت های ماوس با کجی سه بعدی

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

افکت های ماوس با کجی سه بعدی

برای اینکار به قسمت پیشرفته – Advanced > موشن افکت – Motion Effects مراجعه کنید سپس :

  1.  افکت ماوس – Mouse Effects: را روی حالت فعال قرار بدهید.
  2. کاشی سه بعدی – 3D Titt: برای ویرایش روی آیکون مداد کلیک نمایید.
  3. مسیر حرکت – Direction: نوع حرکت را روی یکی از حالت های در مقابل – Direct یا مستقیم – Opposite قرار بدید. در حالت در مقابل عنصر را در خلاف جهت حرکت ماوس کج می کند اما در حالت مستقیم عنصر را در همان جهت کج می کند.
  4. سرعت – Speed: سرعت را هم می توانید بین 1 تا 10 تنظیم کنید.

افکت های ماوس با کجی سه بعدی

 

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print

دریافت مقالات ناب

مقالات شبیه مقالات بالا رو هر هفته میفرستیم به ایمیلتون

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

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

× پشتیبانی آنلاین