آموزش ایجاد افکت نوسان لامپ در المنتور

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

امروز می‌خوایم یاد بگیریم چطور با استفاده از المنتور و کمی کدنویسی 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) تنظیم کن.

سخن پایانی

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

×

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

مطالعه