انیمیشن هایلایت متن هنگام اسکرول با المنتور

تصور کن داری تو یه سایت اسکرول می‌کنی و یهو متن‌های مهم با یه افکت هایلایت خوشگل جلوت ظاهر می‌شن. حس خوبی داره، نه؟ 🔥 انیمیشن‌هایی از این نوع نه تنها سایتت رو پویا و مدرن نشون می‌دن، بلکه باعث می‌شن کاربرای سایتت بیشتر جذب محتوا بشن. تو این آموزش، می‌خوام بهت نشون بدم چطور با المنتور (صفحه‌ساز محبوب وردپرس) و کتابخانه GSAP یه افکت اسکرول باحال بسازی که همه رو انگشت به دهن کنه. چه مبتدی باشی چه حرفه‌ای، این آموزش برات مثل آب خوردنه! 😎 پس با من همراه باش و چشم از صفحه بر ندار 🤝

مقدمه

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

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

چرا برای ساخت انیمیشن‌های اسکرول از GSAP استفاده می کنیم؟

GSAP (پلتفرم انیمیشن GreenSock) یک کتابخانه قدرتمند جاوا اسکریپته که برای انیمیشن‌های روان و کارآمد طراحی شده. این کتابخانه به خاطر عملکرد بی‌نظیر، انعطاف‌پذیری بالا و کنترل دقیقش روی انیمیشن‌ها مشهوره. GSAP در ترکیب با افزونه ScrollTrigger بهت امکان رو می‌ده انیمیشن‌های خیره‌کننده مبتنی بر اسکرول ایجاد کنی 🙂

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

⚡ساخت انیمیشن هایلایت متن با المنتور

حالا بریم سراغ بخش هیجان‌انگیز قضیه!

آماده‌ای تا آستین‌ها رو بالا بزنیم و دست به کار بشیم؟ 🤔

• یک برگه جدید بساز: وارد پیشخوان وردپرست بشو و یک صفحه جدید بساز. بعد روی “ویرایش با المنتور” کلیک کن.
• یک سکشن (بخش) جدید اضافه کن: یک سکشن (Section) جدید به صفحه‌ ات اضافه کن.
• پس زمینه صفحه رو مشکی کن: من برای اینکه این افکت هایلایت متن خیلی بهتر به چشم بیاد، پس زمینه مشکی و تیره انتخاب کردم. (برای تیره یا مشکی کردن رنگ پس‌زمینه برگه، به تب استایل برگه برو. این تب رو میتونی با زدن آیکون چرخ‌دنده بالای صفحه پیدا کنی.) توجه! اگه پس زمینه سایتت سفید و روشنه، من بهت می‌گم باید چیکار کنی تا متن‌ها به درستی دیده بشن و افکت صحیح اعمال بشه فعلن حالت دارک رو با هم پیش میبریم 🙂

• ویجت “سربرگ” (Heading) رو اضافه کن: یک ویجت سربرگ رو توی سکشنی که ساختی، قرار بده. این سربرگ رو برای شروع انیمیشن نیاز داریم. توی تب “پیشرفته” (Advanced) این ویجت، قسمت “CSS Classes” رو پیدا کن و کلاس about رو بهش اضافه کن. شاید برات سؤال باشه که چرا این کلاس رو دادیم. خب، قراره توی کدی که جلوتر بهت میدم، بگیم که انیمیشن هایلایت فقط وقتی شروع بشه که تو اسکرول کردی و رسیدی به اون المانی که کلاس about رو داره.

یه نکته! متنی که می‌خوای رو جایگزین کن و استایلش رو هم طبق سلیقه خودت از تب استایل ویجت تغییر بده. کار سختی نیست، من این مرحله رو رد می‌کنم و به عهده خودت می‌ذارم.

• ویجت “ویرایشگر متن” (Text Editor) رو اضافه کن: حالا نوبت اضافه کردن ویجت “ویرایشگر متن” (Text Editor) هست. این ویجت رو دقیقاً زیر ویجت سربرگ اضافه کن. این همون قسمتیه که قراره افکت هایلایت متن روش اعمال بشه. پیشنهاد می‌کنم یه پاراگراف طولانی بنویسی تا افکت بهتر دیده بشه میتونی از متن زیر استفاده کنی و محتواش رو تغییر بدی:

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

یه نکته مهم! وقتی ویرایشگر متن رو اضافه کردی، حواست باشه که حالت پیش‌فرضش روی “دیداری” (Visual) هست. حتماً بذارش روی “کد” و بعد متنی که بالاتر گفتم رو توش پیست کن.

مواظب باش تگ <h4> رو حذف نکنی! اگه هم خواستی از تگ دیگه‌ای مثل <h5> یا … استفاده کنی، می‌تونی؛ ولی یادت باشه که باید تمام کدهایی رو که <h4> داشتن، با تگ جدیدت جایگزین کنی.

• کلاس CSS به ویجت “ویرایشگر متن” بده: به تب “پیشرفته” (Advanced) ویجت “ویرایشگر متن” برو و توی قسمت “CSS Classes”، کلاس cool-split h4 رو اضافه کن.

• استایل‌های اولیه برای هایلایت متن: حالا باید یکم استایل به متنمون بدیم تا آماده افزودن انیمیشن بشه. به تب “پیشرفته” (Advanced) ویجت “ویرایشگر متن” برو و قسمت کد CSS سفارشی یا همون “Custom CSS” رو پیدا کن. کد زیر رو داخلش قرار بده:

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

• افزودن انیمیشن هایلایت متن: خب حالا وقت جادو کردنه با کمک GSAP، یه ویجت html زیر ویجت ویرایشگر متنت اضافه کن وداخلش کدهای زیرو پیست کن:

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

ذخیره و انتشار برگه رو بزن و از نتیجه نهایی کارت لذت ببر: حالا یه انیمیشن تعاملی داری که با اسکرول کاربر، متنت هایلایت میشه!

نکته مهم:

زیر ویجت HTML، چند ویجت دلخواه (مثل تصویر، جداکننده (Spacer) یا هر چیز دیگه) اضافه کن. این کار باعث افزایش طول صفحه می‌شه و فضای کافی برای اسکرول و مشاهده افکت انیمیشن رو فراهم می‌کنه. بدون فضای اسکرول، ممکنه انیمیشن رو به درستی نبینی!

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

من برای مثال چند تا تصویر اضافه کردم تا ارتفاع صفحه ام به حد کافی باشه که فضای اسکرول مناسبی در اختیار کاربر قرار بگیره 🙂

🔥 نکات تکمیلی آموزش

همونطور که بالاتر هم گفتم، این آموزش در اصل برای پس‌زمینه تیره بود. اما نگران نباش! اگر تم سایت یا پس‌زمینه‌ ات روشنه، می‌تونیم با چند تا تغییر ساده، این افکت هایلایت رو طوری تنظیم کنیم که به خوبی دیده بشه.

کد CSS که قبلاً بهت دادم رو یادت میاد؟ حالا خط مربوط به color رو از اون حذف کن و این کد رو به جاش بذار:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

با این تغییر، متن هایلایت شده به یک خاکستری تیره و تقریباً مات تبدیل میشه که روی پس‌زمینه روشن، کنتراست خوبی ایجاد می‌کنه.

همچنین، در کد اسکریپتی که بالاتر بهت دادم و گفتم توی ویجت HTML بذاری، باید قسمت color: "white" رو به این صورت تغییر بدی:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

حالا وقتی متن هایلایت میشه از خاکستری به رنگ تیره و پررنگ تر مشکی تغییر پیدا میکنه 🙂

فایل درون ریز (json) این آموزش رو از طریق باکس زیر دانلود کنید 🙂

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

نمایش پاپ آپ تأیید خروج هنگام کلیک روی لینک های خارجی در وردپرس

مطالعه

آموزش طراحی هدر شفاف و شیشه ای با المنتور🧡

مطالعه

طراحی باکس دسته‌ بندی خدمات در المنتور با هاور افکت جالب

مطالعه