سلام رفیق! 👋 تو این آموزش قراره یه دکمه تعاملی فوقالعاده خفن بسازیم که وقتی روی قسمت مشخصی از دکمه کلیک میکنی، یه افکت موجی جذاب و حرفهای از همونجا ظاهر میشه! 🌊🤩 این افکت نهتنها ظاهر سایتت رو چشمنواز میکنه، بلکه حس مدرن بودن رو به کاربر منتقل میکنه. همه این جادوها رو با ویجت دکمه المنتور انجام میدیم! اگه دنبال یه روش خلاقانه برای زیباتر کردن سایتت هستی، تا آخر این آموزش با من همراه باش. 🚀✨
چرا افکت موج؟ (Ripple Effect)🤔
افکت موجی یا Ripple Effect یکی از تکنیکهای جذابه که باعث میشه سایت حس پویایی و تعامل بیشتری به کاربر بده. این افکت زمانی که روی دکمه کلیک به کار میره، مثل یه موج کوچیک از محل کلیک پخش میشه و تجربه کاربری رو به سطح جدیدی میبره.
مراحل ساخت دکمه با هاور افکت موج 🌊
خب، بریم سراغ اصل ماجرا! قراره با چند مرحله ساده، یه دکمه بسازیم که وقتی روش کلیک میکنی، مثل یه موج تو دریا، افکت جذابش پخش بشه. نگران نباش، کار سختی نیست و تا آخرش کنارت هستم. 💪
توجه! این هاور افکت ریپل، زمین تا آسمون با هاور افکتهای معمولی فرق داره! 😎✨ اینجوریه که کاربر هرجا روی دکمه کلیک کنه، دقیقاً از همون نقطه یه موج شفاف و جذاب روی کل دکمه پخش میشه. 🌊👌 انگار دکمه با کاربر حرف میزنه و حس تعاملی بیشتری میده. خیلی شیک و حرفهای، نه؟ 🔥🚀
1. اضافه کردن ویجت دکمه به صفحه 🔘
اولین قدم اینه که وارد صفحهساز المنتور بشی و ویجت دکمه رو به صفحهات اضافه کنی. برای اسم دکمه، یه عنوان جذاب و مرتبط انتخاب کن؛ مثل “کلیک کن” یا “ثبتنام” که هم کاربر رو ترغیب کنه، هم کاربرد دکمه رو مشخص کنه.
✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD
2. تنظیمات اولیه دکمه ⚙️
حالا که دکمه رو اضافه کردی، وقتشه با استفاده از تنظیمات ویجت، اونو به دلخواه خودت شخصیسازی کنی:
- متن دکمه: تغییرش بده و یه متن جذاب و کاربرپسند انتخاب کن.
- استایل دکمه: رنگ پسزمینه، رنگ متن، و حتی فونت رو تغییر بده تا با طراحی کلی سایتت هماهنگ باشه.
- لینک: دکمه رو به صفحهای که میخوای کاربر هدایت بشه متصل کن.
- آیکون: اگه دوست داری، یه آیکون جذاب به دکمه اضافه کن تا بیشتر جلب توجه کنه.
- کلاس CSS: یه کلاس سفارشی تعریف کن تا بعداً بتونی افکت موج رو بهش اضافه کنی. مثلاً اسم کلاس رو بذار:
RayaWp-btn.
با این کارها، دکمهات آماده یه تغییر خفن و حرفهای میشه!
3. اضافه کردن CSS سفارشی 🎨
حالا وقتشه که هاور افکت موج رو با CSS اضافه کنیم. به قسمت تنظیمات پیشرفته ویجت دکمه > CSS سفارشی برو کد زیر رو وارد کن:
/* Ripple Effect by RayaWp.ir */
.RayaWp-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-weight: 600;
color: white;
outline: none;
cursor: pointer;
overflow: hidden;
}
.RayaWp-btn .ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
transform: scale(0);
animation: ripple-animation 0.6s linear;
pointer-events: none;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}3. اضافه کردن کد جاوا اسکریپت 🧑💻
برای اینکه موقعیت دقیق کلیک کاربر رو شناسایی کنیم و افکت ریپل از همون نقطه آغاز بشه، باید کد جاوا اسکریپت زیر رو به دکمه اضافه کنیم. برای این کار، کافیه کد زیر رو در یک ویجت HTML بعد از ویجت دکمه قرار بدی:
<script>
document.querySelectorAll('.RayaWp-btn').forEach(button => {
button.addEventListener('click', function(event) {
const rect = button.getBoundingClientRect(); // ابعاد دکمه
const size = Math.max(rect.width, rect.height); // اندازه افکت بر اساس دکمه
const x = event.clientX - rect.left - size / 2; // موقعیت افقی کلیک
const y = event.clientY - rect.top - size / 2; // موقعیت عمودی کلیک
const ripple = document.createElement('span');
ripple.style.width = ripple.style.height = `${size}px`;
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
ripple.classList.add('ripple');
button.appendChild(ripple);
ripple.addEventListener('animationend', () => {
ripple.remove();
});
});
});
</script>
فایل نهایی و JSON دکمه با هاور افکت ریپل رو میتونید از قسمت زیر دانلود کنید👇🎉این فایل رو میتونید به راحتی توی المنتور درون ریزی کنید 🙂
کار تمومه! 🎉 حالا یه دکمه با هاور افکت جذاب و تعاملی داری که میتونه تجربه کاربری سایتتو خیلی بهتر کنه 🚀💻! اگر این هاور افکت رو دوست داشتی یا سوالی داشتی، حتما کامنت بذار و بگو نظرت چیه! ✍️😉 این افکت رو توی دکمههای شیشهای رباتهای تلگرام هم میتونی ببینی! 💬🤖
