ایجاد هاور افکت زوم و محو شدن (Blur) باکس در المنتور

ایجاد هاور افکت زوم و محو شدن (Blur) باکس در المنتور

تصور کن: کاربر وارد سایتت میشه و با یه رابط کاربری معمولی روبرو میشه… کسل‌کننده هست، نه؟ 😴

حالا این رو تصور کن: کاربر وارد سایتت میشه و وقتی ماوس رو روی باکس‌ها حرکت میده، هر باکسی که روش هاور میشه، به طرز سحرآمیزی بزرگ و درخشان میشه، در حالی که بقیه المان‌ها محو و تار میشن… چشم‌نواز و خیره‌کننده هست نه؟! 🤩✨

تو این مقاله، قراره بهت آموزش بدم که چطوری روی باکس ها و کارت های پست و محصولات سایت و هر باکسی که دلت میخاد این افکت جذاب رو پیاده کنی پس با من تا پایان این پست همراه بمون. 🧙‍♂️

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

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

هاور افکت زوم فقط یه افکت ساده نیست، بلکه یه استراتژی هوشمندانه برای جلب توجه کاربره! 🎯 این تکنیک قدرتمند طراحی، مثل یه چوب جادویی عمل می‌کنه که المان‌ها رو به حرکت در میاره و اون‌ها رو زنده می‌کنه.

وقتی کاربر روی یک المان هاور می‌کنه، اون المان از اندازه اولیه خودش بزرگتر میشه، انگار که از صفحه بیرون می‌زنه و دست کاربر رو می‌گیره! 👋 این حرکت ظریف اما قدرتمند، پیام واضحی به مخاطب میده: “این مهمه! بهش توجه کن!”

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

• جذب نگاه در 0.3 ثانیه: مغز انسان به حرکت و تغییر اندازه واکنش فوری نشون میده
• تعامل غیرقابل مقاومت: کاربران نمی‌تونن جلوی خودشون رو بگیرن که با المان‌های متحرک بازی نکنن
• تجربه‌ای شبیه اپلیکیشن: سایتت رو از حالت استاتیک خارج می‌کنه و حس یک اپلیکیشن پیشرفته بهش میده
• برتری رقابتی آشکار: وقتی رقبات هنوز سایت‌های استاتیک دارن، تو یک قدم جلوتری
• کاربر محور به معنای واقعی: این افکت فقط قشنگ نیست، بلکه به کاربر کمک می‌کنه سریع‌تر به هدفش برسه

افکت بلور (Blur): سلاح مخفی طراحان حرفه‌ ای 🌫️✨

افکت بلور مثل یک کارگردان هنری عمل می‌کنه که می‌دونه کدوم قسمت‌های صحنه رو تاریک کنه تا بازیگر اصلی بدرخشه! 🎭

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

وقتی بلور رو با هاور افکت زوم ترکیب می‌کنی، معجزه اتفاق می‌افته:

• المان انتخاب شده بزرگ، واضح و درخشان میشه
• سایر المان‌ها به پس‌زمینه می‌رن، تار و کم‌رنگ میشن
• مغز کاربر بدون زحمت می‌دونه کجا رو باید نگاه کنه

این فقط یک افکت ساده نیست – این یک شاهکار روانشناسی بصریه! 🧠✨

آموزش ایجاد هاور افکت زوم و بلوری شدن باکس در المنتور 🛠️

گام 1: ایجاد ساختار باکس‌ها با ویجت آیکون باکس 📦

• یه برگه جدید بساز یا تو برگه‌ای که می‌خوای افکت رو پیاده کنی، روی دکمه «ویرایش با المنتور» کلیک کن تا وارد محیط طراحی بشی.
• یک سکشن جدید ایجاد کن
• داخل سکشن، چند ستون کنار هم بساز (مثلاً 3 یا 4 ستون، بسته به طراحیت: برای مثال من 4 ستون ایجاد کردم)

• در هر ستون، روی آیکون + کلیک کن و ویجت “آیکون باکس” رو انتخاب کن.

توجه! ⚠️ مجبور نیستی! که حتماً از ویجت آیکون باکس استفاده کنی. می‌تونی این افکت رو روی هر المان دلخواه مثل کارت محصول یا ویجت تصویر به کار ببری. من در این آموزش از ویجت آیکون باکس استفاده کردم تو میتونی از المان دیگه ای استفاده کنی 🙂

• هر آیکون باکس رو با یک آیکون جذاب، عنوان گیرا و توضیحات مختصر پر کن.
• جادوی واقعی اینجا شروع میشه: به هر ستون یا کانتینر که ویجت آیکون باکس داخلشه، کلاس RayaWp-hovers رو اضافه کن:
  • روی ستون یا کانتینری که آیکون باکس داخلش قرار داره کلیک کن تا انتخاب بشه
  • به تب “پیشرفته” برو
  • در قسمت “CSS Classes”، عبارت RayaWp-hovers رو تایپ کن
  • این کلاس، کلید جادویی ماست که بعداً از طریق کدهای JS بهش دستور میدیم چیکار انجام بده!

گام 2: طراحی ظاهر آیکون باکس‌ها با سلیقه خودت 🎨

حالا وقت هنرنمایی توئه! باکس‌ها رو با سلیقه خودت طراحی کن:

1. استایل هر آیکون باکس رو شخصی‌سازی کن:
   • رنگ پس‌زمینه جذاب انتخاب کن (رنگ‌های برندت عالی هستن)
   • رنگ آیکون رو هماهنگ با پالت رنگی سایتت تنظیم کن
   • فونت و اندازه متن رو طوری انتخاب کن که خوانا و شیک باشه
   • پدینگ مناسب (حدود 10px-20px)
   • گردی گوشه‌ها (8px-12px) برای ظاهری مدرن و دوست‌داشتنی
2. فاصله بین باکس‌ها رو طوری تنظیم کن که وقتی افکت بلور فعال میشه، اثرش کاملاً مشخص باشه (حداقل 15px-20px فاصله ایده‌آله).
3. یه سایه ملایم (box-shadow) به باکس‌ها اضافه کن تا از زمینه جدا بشن و حس عمق ایجاد کنن.

گام 3: اضافه کردن کدهای جاوا اسکریپت و CSS برای هاور افکت زوم و بلور شدن باکس💻

حالا وقتشه که جادوی واقعی رو به سایتت اضافه کنی! 🧙‍♂️

1. یه ویجت HTML به صفحه اضافه کن مهم نیست کجای صفحه قرار میدی!
2. کدهای زیر رو بهش اضافه کن (به دقت کپی کن، هر کاراکتر مهمه!):

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
     
var $ = jQuery
$(document).ready(function(){
    
$('.RayaWp-hovers').hover(function(){
    $('.RayaWp-hovers').addClass('blur')
    $(this).removeClass('blur')
}, function(){
    $('.RayaWp-hovers').removeClass('blur')
})
})
</script>
<style>
.RayaWp-hovers{
    transition: all 0.3s ease-in-out;
}
.RayaWp-hovers.blur{
    filter: blur(5px) grayscale(0.6);
    transform: scale(0.95);
}
.RayaWp-hovers:hover{
    transform: scale(1.05);
}
.RayaWp-hovers .e-container,
.RayaWp-hovers .e-con{
    box-shadow: 0 10px 60px rgb(0 0 0 / 25%);
}
.RayaWp-hovers .elementor-widget{
    transition: all 0.3s ease-in-out;
}
.RayaWp-hovers.blur .elementor-widget{
    opacity: 0.5;
}
</style>

نکته! ✨ اگه می‌خوای میزان بلور یا محو بودن باکس‌ها در حالت هاور رو تنظیم کنی، می‌تونی خط ۲۰ کد بالا رو ویرایش کنی و به جای filter: blur(5px) مقدار دلخواهت رو قرار بدی. 🔧🎨

جمع بندی 🏁

تبریک میگم، طراح هنرمند! 🎉👏

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

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

حالا وقتشه که خلاقیتت رو به کار ببری و این افکت رو با سبک منحصر به فرد خودت شخصی‌سازی کنی. موفق باشی، خلاق باش، و سایتت رو به یک شاهکار تبدیل کن! 🚀✨ تا یه آموزش خفن دیگه فعلن شما رو به خدای بزرگ میسپارم 🙂