ساخت انیمیشن‌ متنی خیره‌ کننده در المنتور

ساخت انیمیشن‌ متنی خیره‌ کننده در المنتور – تا حالا شده وارد سایتی بشی و از همون لحظه اول، حسابی جذبش بشی؟ 😍 می‌دونی چی می‌تونه این حس رو ایجاد کنه؟ انیمیشن متنی! اونم نه هر انیمیشنی، بلکه انیمیشنی که کلمات صفحه رو زنده کنه و یه تجربه کاربری فراموش‌نشدنی بسازه. 🤩

تصور کن کاربر وارد صفحه‌ات میشه و به جای دیدن یه متن خشک و ساده، کلمات یکی‌یکی و با یه حرکت چشم‌نواز ظاهر میشن! 🚀 این همون جادویی هست که باعث میشه کاربر بیشتر تو سایتت بمونه، از گشت و گذار لذت ببره و احتمالاً دوباره هم بهت سر بزنه. انیمیشن‌های متنی فقط یه حرکت قشنگ نیستن؛ اونا به محتوای سایتت هویت و شخصیت میدن، توجه کاربر رو جلب می‌کنن و پیامتو مؤثرتر بهش می‌رسونن. 💬

تو این مقاله قراره یاد بگیری چطور با المنتور، بدون نیاز به دانش پیچیده کدنویسی، انیمیشن متنی خیره‌کننده بسازی که حتی طراحان وب باتجربه هم از خلاقیتت شگفت‌زده بشن! 🤯 آماده‌ای تا با هم این جادو رو خلق کنیم؟ ✨ پس بزن بریم تو کارشششششش!

ابزار جادویی ما: المنتور و GSAP

خب، برای اینکه بتونیم این انیمیشن متنی جذاب رو بسازیم، به دوتا ابزار اصلی نیاز داریم: المنتور به عنوان صفحه ساز، و GSAP برای خود انیمیشن‌.

شاید بپرسی GSAP چیه؟ 🤔 نگران نباش، اصلاً چیز پیچیده‌ای نیست. GSAP (مخفف GreenSock Animation Platform) یه کتابخونه جاوااسکریپت فوق‌العاده قدرتمنده که بهت اجازه میده انیمیشن‌های خیلی پیچیده و روون رو خیلی راحت بسازی. فکر نکن قراره وارد دنیای کدنویسی عجیب و غریب بشی! فقط کافیه یه سری کد آماده رو کپی کنی و تو جای درستش قرار بدی. قول میدم نتیجه نهایی‌اش حسابی غافلگیرت می‌کنه و از ساختن این انیمیشن متنی لذت می‌بری. ✨

×

آموزش ساخت تولتیپ در وردپرس بدون پلاگین

مطالعه

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

🟢مرحله به مرحله تا خلق انیمیشن متنی خیره‌ کننده

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

اولین کاری که باید انجام بدیم، چیدن ساختار اولیه داخل المنتوره. خیلی راحته:

یه سکشن جدید بساز: وسط برگه‌ات روی علامت ➕ بزن تا یه کانتینر فلکس‌باکس به صفحه‌ات اضافه بشه.

×

ایجاد دارک مود (Dark Mode) در وردپرس و المنتور بدون افزونه

مطالعه

• از بخش تنظیمات کانتینر، ارتفاعش رو روی واحد vh و عدد 100 تنظیم کن تا تمام صفحه نمایش ات رو در بر بگیره!

• برای اینکه انیمیشن متنی که می‌سازی حسابی به چشم بیاد و بدرخشه، لازمه یه پس‌زمینه تیره و کنتراست بالا داشته باشیم. برای این کار: به تب استایل کانتینر برو و از قسمت پس زمینه، بکگراند رو مشکی کن (درست مانند تصویر پایین)

برای اینکه کارمون مرتب باشه و بعداً گیج نشیم، بهتره اسم کانتینری که اضافه کردیم رو تغییر بدیم. از نوار ابزار بالای صفحه، روی آیکون “ساختار” (Navigator) کلیک کن. این بخش تمام المان‌های صفحه‌ات رو نشون میده. حالا، کانتینری رو که همین الان اضافه کردی، پیدا کن (معمولاً اسمش “Container” هست). روش دوبار کلیک کن و اسمش رو به “section” تغییر بده. (درست مثل تصویر زیر)✨

حالا باید یه کانتینر دیگه داخل کانتینر اصلی (که اسمش رو section گذاشتیم) اضافه کنیم. همچنین، توی ساختار، اسم این کانتینر جدید رو میزاریم Text.

حالا نوبت به اضافه کردن کاراکترهای متنمون می‌رسه. برای اینکه انیمیشن درست کار کنه، باید هر کاراکتر از متنی که می‌خواهی (مثلاً همون “RayaWp” که تو این آموزش استفاده می‌کنیم) رو جدا جدا با ویجت سربرگ اضافه کنی داخل کانتینر Text.

پس برای متن RayaWP به ۶ تا ویجت سربرگ نیاز داریم و باید این ۶ تا رو اضافه کنیم به داخل کانتینر Text

×

حل مشکل اسکرول افقی در وردپرس و المنتور: راه حل تضمینی

مطالعه

وقتی ویجت‌های سربرگ یا تیتر رو اضافه کردی، حالا وقتشه که متن‌هاشون رو به حروف برندت تغییر بدی. مثلاً اگه برندت “RayaWp” هست، هر ویجت سربرگ باید شامل یک حرف باشه (مثل R، a، y، a، W، p).
بعدش، تگ HTML رو روی Span تنظیم کن.
حالا برو به تب استایل! 🎨 اینجا می‌تونی رنگ هر حرف رو به سلیقه خودت تغییر بدی. می‌تونی همه حروف رو یک رنگ کنی یا مثل من، به هر حرف یه رنگ خاص بدی که بیشتر به چشمت بیاد. این کاملاً بستگی به برند یا متنت داره که چطور می‌خوای به نظر برسه. یکم خلاقیت به خرج بده تا کار نهایی ات جذاب بشه 🙂

ای وای، اینو داشت یادم می‌رفت! 😁 یادت باشه که اندازه متن رو از تب استایل و قسمت تایپوگرافی، روی 200 پیکسل یا یه اندازه مناسب دیگه تنظیم کنی. طبیعتاً هرچی اندازه متن بزرگ‌تر باشه، اون انیمیشن و حالت متحرک بهتر به چشم میاد و جذاب‌تر میشه! ✨

حالا باید به تک تک حروف یا ویجت‌های تیتر (سربرگ)، کلاس CSS با نام letter رو اختصاص بدیم. برای انجام این کار:

• به تب پیشرفته هر ویجت سربرگ برو.
• از طریق بخش کلاس‌های CSS، این کلاس رو برای اون ویجت تعریف کن.

مرحله آخر، اضافه کردن ویجت HTML برای خلق انیمیشن متنیه. حالا که حروف رو آماده کردیم، وقت کدها رسیده. ویجت HTML رو اضافه کن: تو آخر کانتینر Text یه ویجت HTML بذار. این ویجت جاییه که کدهای جاوااسکریپت ما قرار می‌گیرن. کدهای جادویی GSAP رو وارد کن: حالا وقتشه که کدهای GSAP رو داخل ویجت HTML بذاری. کدها رو کپی کن و داخل ویجت HTML پیست کن.

×

🚀حل فوری مشکل لود نشدن المنتور زیر یک دقیقه ( دلایل مشکل)

مطالعه

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

کارمون تمومه! 🎉 حالا دکمه “انتشار” رو بزن تا تغییراتت ذخیره بشن. بعدش “مشاهده برگه” رو بزن و می‌بینی که چه انیمیشن متنی فوق‌العاده جذابی ساختی! 🤩

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

مرسی که تا آخر این آموزش با من همراه بودی و با نگاه قشنگت منو حمایت کردی. امیدوارم روز خوبی داشته باشی. تا یه آموزش جذاب و خاص دیگه، تو رو به خدای بزرگ می‌سپارم! 🙏 فعلاً یا علی! 👋

×

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

مطالعه