آموزش ساخت انیمیشن متن حرفه‌ای در المنتور با GSAP + SplitText (رایگان 1404)

چرا این آموزش به درد شما می‌خوره؟

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

اینجا بهت یاد می‌دم چطور با کمک المنتور + GSAP + SplitText، یه افکت حرفه‌ای روی متن پیاده کنی که هم سبکه، هم واکنش‌گرا و هم خیلی چشم‌نوازه.

پیش‌نیازها (سریع و ساده)

قبل از هر کاری، این ابزارها رو داشته باش:

🔗 اگر هنوز سایتت رو راه‌اندازی نکردی، پیشنهاد می‌کنیم طراحی سایت با المنتور رو از طریق تیم ما شروع کنی.

مراحل ساده و کاربردی اجرای انیمیشن متن

1. اضافه‌کردن متن با المنتور

• یه صفحه بساز با المنتور و یک ویجت Heading بنداز توش.

• متن رو وارد کن (مثلاً: «ما با طراحی هدفمند، سایت شما رو به پول‌سازترین ویترین تبدیل می‌کنیم!»).

• تگ heading رو روی H2 بذار (مهمه چون توی کد باید دقیق مشخص بشه).

2. کلاس بده به متن

• به تنظیمات پیشرفته (Advanced) ویجت Heading برو.

• توی بخش CSS Classes، بنویس:

textsubhead

(این همون کلاسیه که در CSS و کدهای JS ازش استفاده می‌کنیم.)

3. اضافه‌کردن کد CSS

برای اینکه متن از اول توی صفحه نمایش داده نشه (تا فقط با انیمیشن بیاد)، این کد رو توی Custom CSS خود المنتور یا قالب قرار بده:

.textsubhead h2 {
  opacity: 0;
}

4. آپلود فایل‌های GSAP و SplitText

دو فایل زیر رو در مسیر /public-html/js/ هاستت آپلود کن:

• gsap.min.js

• SplitText.min.js

📁 اینا کتابخانه هستن، نه افزونه! از سایت GSAP قابل دانلوده و از اردیبهشت ۱۴۰۴ به صورت رایگان در دسترس قرار گرفتن.که روی اسم فایل کلیک کنید از سایت وبینیو دانلود میشن.

5. اضافه‌کردن کد انیمیشن

حالا نوبت اجرای افکت رسیده. کد زیر رو در یک ویجت HTML بعد از ویجت متن قرار بده (خیلی مهمه!):

<script src="/js/gsap.min.js"></script>
<script src="/js/SplitText.min.js"></script>

<script>
  gsap.registerPlugin(SplitText);

  // صبر می‌کنیم تا DOM المنتور کامل لود بشهWEBINEW 
  setTimeout(() => {
    const el = document.querySelector(".textsubhead h2");
    if (!el) return;

    gsap.set(el, { opacity: 1 });

    const split = SplitText.create(el, { type: "words" });

    gsap.from(split.words, {
      duration: 2,       // مدت انیمیشن
      yPercent: 100,     // از پایین به بالا
      opacity: 0,
      stagger: 0.12,     // فاصله بین کلمات
      ease: "power4.out"
    });
  }, 800); // تاخیر برای لود المنتور
</script>

✅ اگر تگ heading رو H2 گذاشتی، توی این کد هم باید h2 باشه. اگه H1 یا H3 گذاشتی، حتماً تو کد هم تغییرش بده.

نتیجه رو ببین و حالش رو ببر!

صفحه رو منتشر کن و توی حالت دسکتاپ، موبایل و تبلت تستش کن.
می‌بینی که متن با یه افکت ماسکی روان و شیک ظاهر میشه — دقیقاً مثل سایت‌های حرفه‌ای بین‌المللی!

سفارشی‌سازی بیشتر

توی کد GSAP بالا، می‌تونی موارد زیر رو تغییر بدی:

این افکت برای چه جاهایی خوبه؟

• هدر سایت

• صفحات فرود تبلیغاتی (Landing)

• معرفی خدمات خاص

• ساخت لندینگ حرفه‌ای برای کمپین‌های گوگل ادز یا اینستاگرام مارکتینگ

🔗 اگه دنبال اجرای کمپین‌های حرفه‌ای هستی، بخش خدمات دیجیتال مارکتینگ وبینیو رو ببین.

جمع‌بندی

ساخت یه انیمیشن متنی شیک و تمیز با المنتور و GSAP واقعاً ساده‌ست، فقط باید بدونی چطوری کلاس بدی، کد JS رو درست بذاری و صبر داشته باشی برای لود المنت‌ها.

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

📞 برای مشاوره رایگان:
تماس با ما