ایجاد افکت زوم و چرخش تصویر در المنتور

ایجاد افکت زوم و چرخش تصویر در المنتور – سلام رفیق رایا وردپرسی خودم حالت چطوره؟! 👋

اگه دنبال راهی هستی که تصاویر سایتت رو تو المنتور جذاب‌تر کنی و کاربرات رو میخکوب کنی، افکت زوم و چرخش تصویر دقیقاً همون چیزیه که لازم داری! با این افکت‌ می‌تونی به تصاویرت یه حس پویا و حرفه‌ای بدی و اونا رو از یکنواختی در بیاری 🙂

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

چرا اصلاً باید از افکت زوم و چرخش استفاده کنی؟ 🤔

شاید بپرسی خب این افکت زوم به چه دردم می‌خوره؟ یا چرخش تصویر چی؟ بذار بهت بگم چرا این حرکت‌های کوچیک اینقدر مهمن:

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

×

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

مطالعه

وقتی یه کاربر وارد سایتت می‌شه، اولین چیزی که توجهش رو جلب می‌کنه، تصاویرن. اگه این تصاویر فقط ساکن و بی‌حرکت باشن، ممکنه کاربر حس کنه سایتت یه کم خسته‌کننده‌ست. اما با اضافه کردن افکت زوم، می‌تونی کاری کنی که وقتی کاربر ماوس رو روی تصویر می‌بره، تصویر بزرگ‌تر بشه و حس تعامل بهش بده. حالا اگه یه چرخش کوچولو هم بهش اضافه کنی، دیگه کاربر حس می‌کنه داره با یه سایت مدرن و خلاق سروکار داره. این یعنی زمان بیشتری تو سایتت می‌مونه، نرخ پرش (Bounce Rate) کمتر می‌شه و گوگل عاشق این ماجراست! 😊

علاوه بر این، افکت زوم باعث می‌شه کاربر بتونه جزئیات تصویر رو بهتر ببینه، بدون اینکه لازم باشه روش کلیک کنه. این برای سایت‌های فروشگاهی، نمونه‌کارها یا گالری‌های عکاسی خیلی کاربردیه. حالا بریم سراغ اصل کار!

💡ایجاد هاور افکت زوم و چرخش تصویر در المنتور

حالا بریم سراغ اصل مطلب اون چیزی که منتظرش بودی 🙂 من تو این آموزش با یه تکه کد CSS ساده بهت میگم چطوری این افکتو به تصاویر سایتت اضافه کنی 🙂

قدم اول: اضافه کردن ابزارک تصویر (Image Widget) 🖼️

خب، اولین کاری که باید بکنی اینه که تصویری که مدنظرته رو به صفحه‌ات اضافه کنی.

×

آموزش طراحی باکس زیبا با لبه های L شکل در المنتور

مطالعه

• از منوی سمت راست المنتور، ابزارک “تصویر” (Image) رو پیدا کن.
• ابزارک تصویر رو بکش (Drag) و بنداز (Drop) توی بخشی از صفحه‌ات که می‌خوای تصویر اونجا نمایش داده بشه.
• بعد از اضافه کردن ابزارک، از پنل سمت راست، روی قسمتی که نوشته “انتخاب تصویر” (Choose Image) کلیک کن.
• تصویر مورد نظرت رو از کتابخانه رسانه انتخاب کن یا اگه هنوز آپلودش نکردی، آپلودش کن. یادت باشه که اسم فایل تصویر و متن جایگزین (Alt Text) اون برای سئوی تصاویرت مهمه! اسم فایل رو فارسی یا نامفهوم نذار و متن جایگزین رو هم مرتبط با تصویر بنویس. گوگل این چیزا رو دوست داره! 😉

قدم دوم: رفتن به بخش تنظیمات پیشرفته (Advanced Settings) ⚙️

حالا باید بری سراغ تب “پیشرفته” (Advanced) ⚙️. اینجا دو تا جای مهم داریم که باید پیداشون کنی:

1. اول برو توی بخشی که نوشته “کلاس‌های CSS”. اینجا می‌تونی به تصویرت یه کلاس اختصاص بدی. یه اسم دلخواه بنویس، مثلاً RayaWpimg. این اسم رو برای این بهش میدی که با کد CSS فقط همین تصویر رو هدف قرار بدی و بقیه عکس‌های سایتت تغییر نکنن. پس این اسم RayaWpimg رو اینجا وارد کن. حواست باشه که دقیقاً همین اسم رو بنویسی.
2. بعدش، کمی به پایین صفحه اسکرول کن👇 تا برسی به بخشی که اسمش “CSS سفارشی” (Custom CSS) هست. دقیقاً همین‌جاست که باید کد CSS جادویی رو که برای افکت زوم و چرخش لازم داریم، بچسبونی! ✏️✨

پس شد: تب پیشرفته ➡️ بخش کلاس‌های CSS (بهش یه اسم مثل RayaWpimg بده) 👈 اسکرول به پایین‌ صفحه 👈 بخش CSS سفارشی (کد رو اینجا بذار).

خیلی ساده‌ست، نه؟ حالا آماده‌ای کد CSS رو برات بگم؟ 😉

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

• .RayaWpimg: این میگه هرچی از کادر تصویر زد بیرون، نشون داده نشه (مخفی بشه).
• .RayaWpimg img: این قسمت به خود تصویر میگه که انیمیشنش (تغییر شکلش) توی 0.8 ثانیه و نرم اتفاق بیفته.
• .RayaWpimg:hover img: این اصل افکت ماست! میگه وقتی ماوس رفت روی تصویر، اون رو 1.2 برابر زوم کن و 10 درجه بچرخون.

تبریک می‌گم! 🎉 تو همین الان موفق شدی، افکت زوم و چرخش رو به تصویرت اضافه کنی. دیدی چقدر راحت بود؟ فقط با کمی CSS اینکارو تونستی انجامش بدی 🙂 این یه راه خیلی ساده و موثر برای جذاب‌تر کردن سایتت و نگه داشتن کاربر توی صفحه‌اته.

×

آکاردئون خفن به سبک دیوار بساز!

مطالعه

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

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

اگه سوالی داشتی یا جایی برات مبهم بود، حتماً بپرس. خوشحال میشم کمکت کنم.

موفق باشی و سایتت همیشه پربازدید! 👋💖

×

طراحی باکس دسته‌ بندی خدمات در المنتور با هاور افکت جالب

مطالعه