آموزش ایجاد افکت نوسان لامپ در المنتور – آیا تا حالا به این فکر کردی که چطور میتونی با یک افکت جذاب و انیمیشنی ساده، وبسایتت رو از بقیه متمایز کنی؟ 🌟
توی طراحی وب، جزییات هستن که سایت رو خاص و به یادموندنی میکنن. حالا تصور کن یک لامپ زیبا در وبسایتت داری که به نرمی در حال تاب خوردن باشه؛ انگار که یک حس زندگی و حرکت رو به کل سایت تزریق میکنه. جذاب نیست؟ 🤩
امروز میخوایم یاد بگیریم چطور با استفاده از المنتور و کمی کدنویسی HTML و CSS، افکت نوسان لامپ رو طراحی کنیم. نگران نباش! 😌 این آموزش قدم به قدم طراحی شده و حتی اگر تجربه زیادی در کدنویسی نداری، باز هم میتونی نتیجه فوقالعادهای بگیری. آمادهای؟ بزن بریم! 🚀
چرا افکت نوسان لامپ؟
افکت نوسان لامپ یک تکنیک انیمیشنی ساده اما خلاقانهست که میتونه حس پویایی و تعامل رو به سایتت اضافه کنه. 🌐 این افکت مناسب انواع وبسایتهاست، مثل:
- وبسایتهای شخصی برای نمایش خلاقیت 🎨
- سایتهای فروشگاهی برای جلب توجه کاربر 🛒
- سایتهای شرکتی برای حرفهایتر دیده شدن 👨💻
با اجرای این افکت، میتونی کاربران رو مجذوب طراحی سایتت کنی و حس بهتری از برندت به اونها بدی.
✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD
این افکت و تکنیک دقیقاً همون چیزیه که ما در صفحه اصلی رایا وردپرس ازش برای جذابیت و جلب توجه بیشتر استفاده کردیم. تو هم میتونی ازش داخل پروژهها و لندینگها به خصوص لندینگهای دارک مود استفاده کنی 🙂
ابزارهای لازم برای ایجاد افکت نوسان لامپ در المنتور
قبل از شروع، مطمئن شو که این ابزارها رو آماده داری:
- المنتور پرو: برای اضافه کردن ویجت HTML. (اگه نسخه پرو المنتور رو نداری نگران نباش میتونی از اینجا دانلود کنی)
- دانش پایهای از HTML و CSS: نیازی نیست حرفهای باشی، همین که بتونی کدها رو کپی و درک کنی، کافیه.
- زمان و حوصله: چون این کار یه ذره دقت و توجه میخواد. 🕒
مرحله اول: اضافه کردن ویجت HTML به صفحه
برای شروع، باید یک ویجت HTML به صفحهای که میخوای افکت نوسان لامپ رو اجرا کنی، اضافه کنی:
- وارد صفحهای شو که در حال طراحیش هستی.
- از المنتور، ویجت HTML رو انتخاب کن و به صفحه درگ کن. 🖱️
- حالا کد زیر رو داخل ویجت HTML کپی کن:
<!-- Yellow bulb SVG Code by RayaWp.ir -->
<section class="overflow-x-clip">
<div class="my-container">
<div class="lamp">
<svg width="596" height="550" viewBox="0 0 596 550" fill="none" xmlns="http://www.w3.org/2000/svg" class="lamp-svg">
<path d="M358.772 123.447L295.639 125.454L232.505 127.462L74.4094 452.306C71.7369 457.797 75.7398 464.19 81.8468 464.184L304.214 463.961L517.78 455.689C523.831 455.455 527.583 449.006 524.795 443.63L358.772 123.447Z" fill="url(#paint0_linear_23526_3898)"></path>
<path d="M293.282 51.4035C292.058 51.4424 290.996 52.2606 290.657 53.44L288.874 59.5477L298.206 59.251L296.038 53.2688C295.618 52.1216 294.513 51.3644 293.29 51.4033L293.282 51.4035Z" fill="currentColor"></path>
<path d="M296.117 140.71C304.582 140.441 311.227 133.36 310.957 124.894C310.688 116.429 303.607 109.784 295.142 110.053C286.676 110.323 280.032 117.403 280.301 125.869C280.57 134.335 287.651 140.979 296.117 140.71Z" fill="white"></path>
<path d="M358.162 114.188C356.345 107.371 351.498 102.21 345.412 99.8345L322.783 90.9732C319.03 89.5078 315.599 87.3357 312.663 84.5877C306.541 78.8433 302.959 70.9132 302.692 62.5254L302.575 58.8313C302.552 58.1116 301.95 57.5465 301.23 57.5694L285.742 58.0619C285.022 58.0848 284.457 58.6871 284.48 59.4067L284.597 63.1008C284.864 71.4886 281.786 79.6386 276.049 85.752C273.293 88.6891 270.007 91.0667 266.355 92.7676L244.335 103.049C238.412 105.814 233.903 111.272 232.522 118.184C232.204 119.771 232.128 121.398 232.179 123.021L232.327 127.667L358.959 123.64L358.811 118.994C358.76 117.379 358.58 115.752 358.162 114.188Z" fill="currentColor"></path>
<path d="M294.24 0L292 0V52H294.24V0Z" fill="currentColor"></path>
<defs>
<linearGradient id="paint0_linear_23526_3898" x1="302.736" y1="133.2" x2="320.871" y2="452.172" gradientUnits="userSpaceOnUse">
<stop stop-color="#FCD535"></stop>
<stop offset="1" stop-color="white"></stop>
</linearGradient>
</defs>
</svg>
</div>
</div>
</section>


مرحله دوم: اضافه کردن CSS برای نوسان لامپ
بعد از اضافه کردن کد HTML، حالا نوبت استایل دادن به لامپ و ایجاد افکت نوسان میرسه.
- از تنظیمات ویجت المنتور، به تب پیشرفته برو و بخش Custom CSS رو باز کن.
- کد زیر رو داخلش قرار بده:
@keyframes swing {
0% {
transform: rotate(-15deg);
}
50% {
transform: rotate(15deg);
}
100% {
transform: rotate(-15deg);
}
}
.lamp {
position: relative;
transform-origin: top center;
}
.lamp-svg {
animation: swing 4s ease-in-out infinite;
transform-origin: top center;
}
مرحله سوم: شخصی سازی افکت
حالا که افکتت آماده شده، میتونی زمان نوسان یا زاویه حرکت رو تغییر بدی تا با سلیقهات هماهنگ بشه:
- برای نرمتر شدن حرکت، مقدار
ease-in-out
یا زمان انیمیشن (مثلاً4s
در لاین 19 کد بالا) رو تغییر بده. - زاویه نوسان رو با تغییر مقادیر
rotate(-15deg)
وrotate(15deg)
تنظیم کن.
سخن پایانی
حالا که یاد گرفتی چطور با ترکیب المنتور و کمی کدنویسی افکتهایی بسازی که سایتت رو حرفهای و خلاقانه نشون بده، نوبت به جشن گرفتن میرسه! 🎉 اگر سوال یا مشکلی داشتی، خوشحال میشم که همینجا پایین این مقاله در قسمت نظرات بهت کمک کنم. 😍 موفق باشی و همیشه به جلو حرکت کن! 🚀
ارسال نظر ( 0 نظر تایید شده )