אנימציות מיוחדות לטקסט עם GSAP

הוספת אנימציות מרתקות לטקסט היא דרך מצוינת לשדרג את חוויית המשתמש באתר. טכניקה זו מאפשרת הדגשת מידע חשוב, משיכת תשומת לב, והעברת מסרים בצורה יצירתית ובלתי נשכחת. במדריך זה, נלמד כיצד להשתמש בספריית JavaScript פופולרית בשם GSAP (GreenSock Animation Platform) ליצירת אנימציות טקסט אינטראקטיביות שיעניקו לאתר שלכם מראה ייחודי ומרתק.

חשיפת הטקסט מילה אחר מילה, תוך יצירת אפקט דמוי כתיבה.

הטקסט "מגיח" בהדרגה וזה יוצר תחושה של כתיבה בזמן אמת, כאילו המילים נכתבות.

כדי להשתמש באפקט זה, תכניסו מתחת ווידג'ט כותרת ווידג'ט HTML ואליו תכניסו את הקוד, בנוסף תכניסו את הקלאס "text1" לכותרת תחת מתקדם.

JavaScript
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

<script>

/*this code develop by dgtool.co.il*/

document.addEventListener("DOMContentLoaded", function() {
  let typeSplit = new SplitType('.text1', {
    types: 'lines, words, chars',
    tagName: 'span'
  });

  gsap.from('.text1 .word', {
    opacity: 0.3,
    duration: 0.1,
    ease: 'power1.out',
    stagger: 0.1
  });
});
</script>

שליטה על חשיפת הטקסט מילה אחר מילה בגלילה

הטקסט מגיב לגלילה בהדרגה תוך כדי גלילה.

כדי להשתמש באפקט זה, תכניסו מתחת ווידג'ט כותרת ווידג'ט HTML ואליו תכניסו את הקוד, בנוסף תכניסו את הקלאס "text1" לכותרת תחת מתקדם.

JavaScript
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script>

/*this code develop by dgtool.co.il*/

document.addEventListener("DOMContentLoaded", function() {
  let typeSplit = new SplitType('.text1', {
    types: 'lines, words, chars',
    tagName: 'span'
  });

  gsap.from('.text1 .word', {
    opacity: 0.3,
    duration: 0.3,
    ease: 'power1.out',
    stagger: 0.1,
    scrollTrigger: {
    trigger: '.text1',
    start: "top center",
    end: "bottom center",
    scrub: true
    }
  });
});
</script>

חשיפת הטקסט מילה אחר מילה, תוך יצירת אפקט קפיצה

כדי להשתמש באפקט זה, תכניסו מתחת ווידג'ט כותרת ווידג'ט HTML ואליו תכניסו את הקוד, בנוסף תכניסו את הקלאס "text2" לכותרת תחת מתקדם.

JavaScript
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script>

/*this code develop by dgtool.co.il*/

document.addEventListener("DOMContentLoaded", function() {
  let typeSplit = new SplitType('.text2', {
    types: 'lines, words, chars',
    tagName: 'span'
  });

  gsap.from('.text2 .word', {
    y: '100%',
    opacity: 0, // Set initial opacity to 0
    duration: 0.5, // Increase duration for smoother transition
    ease: 'power1.out',
    stagger: 0.1,
    scrollTrigger: {
      trigger: '.text2',
      start: 'top center'
    }
  });
});
</script>

שליטה על חשיפת הטקסט מילה אחר מילה בגלילה.

כדי להשתמש באפקט זה, תכניסו מתחת ווידג'ט כותרת ווידג'ט HTML ואליו תכניסו את הקוד, בנוסף תכניסו את הקלאס "text2" לכותרת תחת מתקדם.

JavaScript
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script>

/*this code develop by dgtool.co.il*/

document.addEventListener("DOMContentLoaded", function() {
  let typeSplit = new SplitType('.text2', {
    types: 'lines, words, chars',
    tagName: 'span'
  });

  gsap.from('.text2 .word', {
    opacity: 0,
    y: '20px', // Adjust this value to control the distance the text moves when it appears
    duration: 0.5, // Adjust duration as needed
    ease: 'power1.out',
    stagger: 0.1,
    scrollTrigger: {
      trigger: '.text2',
      start: "top center",
      end: "bottom center",
      scrub: true
    }
  });
});
</script>

חשיפת הטקסט אות אחר אות, תוך יצירת אפקט דמוי כתיבה

כדי להשתמש באפקט זה, תכניסו מתחת ווידג'ט כותרת ווידג'ט HTML ואליו תכניסו את הקוד, בנוסף תכניסו את הקלאס "text3" לכותרת תחת מתקדם.

JavaScript
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

<script>

/*this code develop by dgtool.co.il*/

document.addEventListener("DOMContentLoaded", function() {
  let typeSplit = new SplitType('.text3', {
    types: 'lines, words, chars',
    tagName: 'span'
  });

  gsap.from('.text3 .char', {
    opacity: 0.3,
    duration: 0.3,
    ease: 'power1.out',
    stagger: 0.1
  });
});
</script>

שליטה על חשיפת הטקסט אות אחר אות בגלילה

כדי להשתמש באפקט זה, תכניסו מתחת ווידג'ט כותרת ווידג'ט HTML ואליו תכניסו את הקוד, בנוסף תכניסו את הקלאס "text3" לכותרת תחת מתקדם.

JavaScript
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script>

/*this code develop by dgtool.co.il*/

document.addEventListener("DOMContentLoaded", function() {
  let typeSplit = new SplitType('.text3', {
    types: 'lines, words, chars',
    tagName: 'span'
  });

  gsap.from('.text3 .char', {
    opacity: 0.3,
    duration: 0.1,
    ease: 'power1.out',
    stagger: 0.1,
  
    scrollTrigger: {
      trigger: '.text3',
      start: "top center",
      end: "bottom center",
      scrub: true
    }
  });
});
</script>

חשיפת הטקסט אות אחר אות, תוך יצירת אפקט קפיצה

כדי להשתמש באפקט זה, תכניסו מתחת ווידג'ט כותרת ווידג'ט HTML ואליו תכניסו את הקוד, בנוסף תכניסו את הקלאס "text4" לכותרת תחת מתקדם.

JavaScript
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script>

/*this code develop by dgtool.co.il*/

document.addEventListener("DOMContentLoaded", function() {
  let typeSplit = new SplitType('.text4', {
    types: 'lines, words, chars',
    tagName: 'span'
  });

  gsap.from('.text4 .char', {
    opacity: 0,
    y: '20px',
    rotationZ: '10',
    duration: 0.3,
    ease: 'power1.out',
    stagger: 0.1,
    scrollTrigger: {
      trigger: '.text4',
      start: 'top center'
    }
  });
});
</script>

שליטה על חשיפת הטקסט אות אחר אות בגלילה

כדי להשתמש באפקט זה, תכניסו מתחת ווידג'ט כותרת ווידג'ט HTML ואליו תכניסו את הקוד, בנוסף תכניסו את הקלאס "text4" לכותרת תחת מתקדם.

JavaScript
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script>

/*this code develop by dgtool.co.il*/

document.addEventListener("DOMContentLoaded", function() {
  let typeSplit = new SplitType('.text4', {
    types: 'lines, words, chars',
    tagName: 'span'
  });

  gsap.from('.text4 .char', {
    opacity: 0,
    y: '20px', // Adjust this value to control the distance the text moves when it appears
    rotationZ: '10',
    duration: 0.5, // Adjust duration as needed
    ease: 'power1.out',
    stagger: 0.1,
    scrollTrigger: {
      trigger: '.text4',
      start: "top center",
      end: "bottom center",
      scrub: true,
    }
  });
});
</script>

לסיכום, GSAP היא כלי רב עוצמה ורב-תכליתי ליצירת אנימציות אינטראקטיביות. עם קצת תרגול, תוכלו ליצור אנימציות מדהימות שיעשירו את חוויית המשתמש באתר של הלקוחות שלכם.

אני מקווה שמדריך זה נתן לכם סקירה כללית טובה על מה שניתן לעשות עם GSAP. בהצלחה ביצירת אנימציות מדהימות!

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

ישראל פאר בניית אתרים
ישראל פאר
הבעלים של סטודיו פאר והמייסד של האתר דיגיטול – הבית לבוני אתרים בישראל, מתמחה בבניית אתרי חנות או קטלוג בדגש על חווית משתמש גבוהה, עובד בעיקר במשרד אבל לפחות פעם בשבוע יוצא לעבוד מבית קפה מעניין, נסו גם זה עובד.
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
ווקומרס
הגדלת מכירות באמצעות יצירת מוצרים קשורים עם ג'ט
במדריך זה נלמד איך להגדיל את המכירות באמצעות יצירת מוצרים קשורים עם ג'ט.
אלמנטור
יצירת אפקט מעבר צבע בכפתור אלמנטור
שדרגו את הנראות של הכפתורים באתרים שלכם.
אלמנטור
כפתורי יצירת קשר מתרחבים במעבר עכבר
רוצים להגדיל את ההמרות באתר? הוסיפו כפתורי יצירת קשר שנגללים עם העמוד!
אלמנטור
יצירת אפקט הופעה לאלמנטים במעבר עכבר עם אלמנטור
נמאס לכם להשתמש באותם עיצובים משעממים? המדריך הזה הוא בשבילכם.
ווקומרס
איך ליצור תוויות למוצרים בווקומרס עם ג'ט
הוספת תוויות חיווי למוצרים באתרי מכירות – משפר את חווית המשתמש ומגדיל את המכירות.
חיפוש חופשי
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).