ایجاد انیمیشن موج آب (Wave) روی متن با المنتور

اگه از طراحی‌های تکراری و کسل‌کننده خسته‌ای و می‌خوای یه جذابیت خاص به متن‌های سایتت بدی، انیمیشن موج آب می‌تونه همون چیزی باشه که دنبالش هستی! 😎 این افکت جادویی باعث می‌شه متن‌ها با حرکت طبیعی و روان بالا و پایین برن، مثل امواج زیبای دریا که با هر برخوردشون به ساحل، حس تازه‌ای به اطراف میدن🌊

تو این مقاله از رایا وردپرس، قراره بهت یاد بدم چطور با استفاده از فقط افزونه المنتور و CSS، بدون نصب هیچ افزونه دیگه ای یا کدنویسی، انیمیشن موج آب رو به متن‌های سایتت اضافه کنی و سایتت رو از یکنواختی دربیاری! 🚀

انیمیشن موج آب (Wave Text Animation) چیه؟

قبل از هرچیز، باید بدونی انیمیشن موج آب یا Wave Text Animation یه افکت انیمیشنیه که به متن‌ها این قابلیت رو می‌ده که به‌صورت موجی حرکت کنن. 🤩 این حرکت باعث می‌شه متن‌ها از حالت ایستا خارج بشن و یه حس پویایی به مخاطب بدن. مثلاً وقتی از این افکت استفاده می‌کنی، متن به‌طور پیوسته بالا و پایین میره، شبیه به حرکت امواج آب که به ساحل برخورد می‌کنن. 🌊

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

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

چرا انیمیشن موج آب؟

شاید این سوال پیش بیاد که چرا باید این انیمیشن رو اضافه کنی؟ 🤔 خب، چند دلیل قوی برات دارم که چرا انیمیشن موج آب می‌تونه سایتت رو خاص‌تر و جذاب‌تر کنه:

1. جلب توجه بیشتر: انیمیشن موج آب با حرکت جالبش، چشم کاربران رو به خودش جلب می‌کنه. وقتی این انیمیشن رو روی عنوان یا متن‌ها بذاری، ناخودآگاه توجه کاربر به اون جلب میشه.
2. حس پویایی و انرژی: این انیمیشن باعث می‌شه سایتت از حالت یکنواخت و ساکن خارج بشه و یه حس انرژی و حرکت به کاربر منتقل کنه. 🌟
3. ایجاد تمایز در طراحی: استفاده از انیمیشن‌های منحصر به فرد مثل موج آب می‌تونه سایتت رو از سایت‌های معمولی متمایز کنه و طراحی‌ات رو منحصر به فرد کنه.
4. تجربه کاربری جذاب‌تر: وقتی طراحی سایت جذاب و پویا باشه، کاربران راحت‌تر با سایت تعامل می‌کنن و مدت‌زمان بیشتری تو سایت می‌مونن. این برای سئوی سایتت هم خیلی مفیده! 📈

🤔چطور انیمیشن موج آب رو با استفاده از المنتور به متن اضافه کنیم؟

المنتور پرو یکی از ابزارهای قدرتمند برای طراحی سایت هست که امکانات زیادی برای اعمال افکت‌های جذاب مثل انیمیشن‌های موج آب به شما می‌ده. به راحتی می‌تونی با چند مرحله ساده، این انیمیشن رو به متن‌های سایتت اضافه کنی. فقط کافیه منو تا پایان این پست با نگاه زیبات همراهی کنی تا نحوه انجام کارو دقیق و مرحله به مرحله بهت بگم 🙂

1. افزودن یک سکشن جدید

اولین قدم اینه که وارد پنل المنتور بشی و با کلیک روی آیکون +، یه سکشن جدید بسازی. بعد از اینکه سکشن جدید رو ایجاد کردی، باید چند کار مهم انجام بدی که بهت می‌گم. ابتدا به قسمت ویرایش سکشن برو و ارتفاع سکشن رو روی کمترین مقدار، یعنی 100vh تنظیم کن تا صفحه به‌خوبی نمایش داده بشه.

بعد از اون به تب «استایل» برو و نوع پس‌زمینه رو روی «کلاسیک» تنظیم کن. حالا یه رنگ تیره ( 151B3F#) برای پس‌زمینه انتخاب کن تا ظاهر سکشن مناسب‌تر بشه.

2. اضافه کردن ویجت سربرگ (Heading) به صفحه

ویجت‌هایی مثل «Heading» (عنوان) یا «Text Editor» (ویرایشگر متن) گزینه‌های خوبی برای این کار هستن. وقتی ویجت رو انتخاب کردی، اون رو به داخل صفحه بکش و رها کن. حالا می‌تونی متن دلخواهت رو داخل ویجت بنویسی:)

حالا به قسمت «استایل» ویجت سربرگ برو و رنگ عنوان رو روی سفید تنظیم کن. بعد از بخش «تایپوگرافی»، یه فونت دلخواه انتخاب کن. سایز فونت رو روی 15vw بذار ( تا تو دستگاه‌های مختلف به خوبی نمایش داده بشه). همچنین، وزن فونت رو حتماً روی گزینه‌های ضخیم مثل 900 یا 700 تنظیم کن تا بیشتر به چشم بیاد.

توجه! من این انیمیشن رو روی متن فارسی اجرا کردم، اما می‌تونی همین افکت رو روی متن انگلیسی هم پیاده‌سازی کنی و مشکلی از این بابت نیست. فقط دقت کن که فونت باید ضخیم و برجسته باشه. برای متن انگلیسی، می‌تونی از فونت «Poppins» استفاده کنی و ضخامت فونت رو حتماً روی 700 یا 900 تنظیم کن.

3. تکثیر یا کپی ویجت سربرگ

حالا از ویجت سربرگ، یه کپی بگیر و اون رو زیر ویجت اول پیست کن. یا می‌تونی روش کلیک کنی و دکمه «تکثیر» رو بزنی تا سریعاً یه نسخه جدید از ویجت ایجاد بشه.

4. افزودن کد CSS به ویجت سربرگ اولی

روی ویجت سربرگ اصلی (یعنی اولی) یه بار کلیک کن و به تب پیشرفته برو و در بخش CSS سفارشی کد زیرو وارد کن:

selector{
-webkit-text-stroke: 2px #03a9f4;
}

حالا برو سراغ تب استایل (ویجت اصلی) و رنگ متن رو روی حالت شفاف بذار، یعنی بدون رنگ (#FBFBFB00)

حالا به تب «پیشرفته» ویجت فعلی (اولی) برو و از بخش «جایگاه» یا «موقعیت»، گزینه «مطلق» رو انتخاب کن.

با این کار، نتیجه نهایی به‌صورت تصویر زیر میشه و دو ویجت سربرگ یا هدینگ با هم ترکیب می‌شن 👇

چون دو تا ویجت با هم ترکیب شدن، انتخاب یا سلکت کردنشون ممکنه کمی سخت بشه. برای همین، از نوار بالای المنتور روی آیکون «منوی ناوبری» یا «ساختار» کلیک کن تا راحت‌تر بتونی ویجت مورد نظرت رو انتخاب کنی و تغییرات لازمه رو روش اعمال کنی.

در مرحله بعد، روی ویجت دوم یا سربرگ دومی که پنهان شده کلیک کن. به تب «پیشرفته» برو و جایگاهش رو مثل ویجت اول روی «مطلق» تنظیم کن. حالا کد CSS زیر رو داخل بخش «CSS سفارشی» این ویجت وارد کن:

selector{
-webkit-animation: water 4s ease-in-out infinite;
animation: water 4s ease-in-out infinite;
}
@-webkit-keyframes water{
0%, 100%{
-webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
}
50%{
-webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
}
}
@keyframes water{
0%, 100%{
-webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
}
50%{
-webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
}
}

کار هنوز تموم نشده! بعد از اضافه کردن کد CSS بالا، به تب «استایل» ویجت دومی برو و رنگ متن رو روی «#00A5FF» قرار بده تا رنگ موج دریا رو داشته باشی.

نتیجه نهایی کار مثل ویدیو زیر خواهد بود 🙂

جمع بندی

در نهایت، انیمیشن موج آب یه ابزار جالب و جذاب برای ارتقاء طراحی سایتت به حساب میاد. این انیمیشن می‌تونه باعث بشه سایتت پویا، جذاب و حرفه‌ای به نظر بیاد. به‌راحتی می‌تونی با المنتور پرو، انیمیشن‌های فوق‌العاده‌ای بسازی و تجربه کاربری سایتت رو به سطح جدیدی برسونی. 💪

پس دیگه وقتش رسیده که دست به کار بشی و این انیمیشن رو روی متن‌های سایتت پیاده‌سازی کنی! به نظر من، این کار قطعاً سایتت رو متفاوت و جذاب می‌کنه. 🌊🚀