آموزش ایجاد افکت نوسان لامپ در المنتور – آیا تا حالا به این فکر کردی که چطور می‌تونی با یک افکت جذاب و انیمیشنی ساده، وب‌سایتت رو از بقیه متمایز کنی؟ 🌟
توی طراحی وب، جزییات هستن که سایت رو خاص و به یادموندنی می‌کنن. حالا تصور کن یک لامپ زیبا در وب‌سایتت داری که به نرمی در حال تاب خوردن باشه؛ انگار که یک حس زندگی و حرکت رو به کل سایت تزریق می‌کنه. جذاب نیست؟ 🤩

امروز می‌خوایم یاد بگیریم چطور با استفاده از المنتور و کمی کدنویسی HTML و CSS، افکت نوسان لامپ رو طراحی کنیم. نگران نباش! 😌 این آموزش قدم به قدم طراحی شده و حتی اگر تجربه زیادی در کدنویسی نداری، باز هم می‌تونی نتیجه فوق‌العاده‌ای بگیری. آماده‌ای؟ بزن بریم! 🚀

چرا افکت نوسان لامپ؟

افکت نوسان لامپ یک تکنیک انیمیشنی ساده اما خلاقانه‌ست که می‌تونه حس پویایی و تعامل رو به سایتت اضافه کنه. 🌐 این افکت مناسب انواع وب‌سایت‌هاست، مثل:

• وب‌سایت‌های شخصی برای نمایش خلاقیت 🎨
• سایت‌های فروشگاهی برای جلب توجه کاربر 🛒
• سایت‌های شرکتی برای حرفه‌ای‌تر دیده شدن 👨‍💻

با اجرای این افکت، می‌تونی کاربران رو مجذوب طراحی سایتت کنی و حس بهتری از برندت به اون‌ها بدی.

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

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

قبل از شروع، مطمئن شو که این ابزارها رو آماده داری:

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

1. المنتور پرو: برای اضافه کردن ویجت HTML. (اگه نسخه پرو المنتور رو نداری نگران نباش میتونی از اینجا دانلود کنی)
2. دانش پایه‌ای از HTML و CSS: نیازی نیست حرفه‌ای باشی، همین که بتونی کدها رو کپی و درک کنی، کافیه.
3. زمان و حوصله: چون این کار یه ذره دقت و توجه می‌خواد. 🕒

مرحله اول: اضافه کردن ویجت HTML به صفحه

برای شروع، باید یک ویجت HTML به صفحه‌ای که می‌خوای افکت نوسان لامپ رو اجرا کنی، اضافه کنی:

1. وارد صفحه‌ای شو که در حال طراحی‌ش هستی.
2. از المنتور، ویجت HTML رو انتخاب کن و به صفحه درگ کن. 🖱️
3. حالا کد زیر رو داخل ویجت HTML کپی کن:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

مرحله دوم: اضافه کردن CSS برای نوسان لامپ

بعد از اضافه کردن کد HTML، حالا نوبت استایل دادن به لامپ و ایجاد افکت نوسان می‌رسه.

1. از تنظیمات ویجت المنتور، به تب پیشرفته برو و بخش Custom CSS رو باز کن.
2. کد زیر رو داخلش قرار بده:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

مرحله سوم: شخصی‌ سازی افکت

حالا که افکتت آماده شده، می‌تونی زمان نوسان یا زاویه حرکت رو تغییر بدی تا با سلیقه‌ات هماهنگ بشه:

• برای نرم‌تر شدن حرکت، مقدار ease-in-out یا زمان انیمیشن (مثلاً 4s در لاین 19 کد بالا) رو تغییر بده.
• زاویه نوسان رو با تغییر مقادیر rotate(-15deg) و rotate(15deg) تنظیم کن.

سخن پایانی

حالا که یاد گرفتی چطور با ترکیب المنتور و کمی کدنویسی افکت‌هایی بسازی که سایتت رو حرفه‌ای و خلاقانه نشون بده، نوبت به جشن گرفتن می‌رسه! 🎉 اگر سوال یا مشکلی داشتی، خوشحال می‌شم که همینجا پایین این مقاله در قسمت نظرات بهت کمک کنم. 😍 موفق باشی و همیشه به جلو حرکت کن! 🚀

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

مطالعه

طراحی یک باکس تبلیغاتی جذاب در المنتور

مطالعه

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

مطالعه