3 אנימציות טקסט באלמנטור

קבלו 3 אפקטים מדהימים לשדרוג הטקסטים והכותרות באתרים שלכם, עם קוד מוכן להטמעה בשניות

GSAP / Java Script

יש לשים את הקוד הנבחר בתוך ווידגט html מתחת לכותרת או באלמנטור ניהול קודים תחת body end

  1. אפקט מילים נחתכות מלמטה – יש לתת לווידגט טקסט/כותרת את הקלאס gsap-heading
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  gsap.registerPlugin(ScrollTrigger, SplitText);

  document.querySelectorAll('.gsap-heading').forEach((heading) => { // הקלאס של הכותרת
    const split = new SplitText(heading, { type: "lines, words, chars" });

    gsap.from(split.words, { // חלוקה לפי מילים
      clipPath: "inset(100% 0% 0% 0%)",
      opacity: 0,
      stagger: 0.5,
      scrollTrigger: {
        trigger: heading,
        start: "top 80%",
        end: "top 30%",
        markers: false,
        scrub: 1,
      },
    });
  });
});
</script>

2. אפקט טקסט נכתב משקיפות – יש לתת לווידגט טקסט/כותרת את הקלאס gsap-title

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  gsap.registerPlugin(ScrollTrigger, SplitText);
	
  document.querySelectorAll('.gsap-title').forEach((heading) => { // קלאס הכותרת
    const split = new SplitText(heading, { type: "lines, words, chars" });

    gsap.from(split.words, { // חלוקה לפי מילים
      opacity: 0.2,           // שקיפות ראשונית
      stagger: 0.5,
      scrollTrigger: {
        trigger: heading,
        start: "top 80%",
        end: "top 30%",
        markers: false,
        scrub: 1,
      },
    });
  });
});
</script>

3. אפקט סטיקר – יש לתת לווידגט טקסט/כותרת את הקלאס gsap-heading, את צבע הרקע מגדירים בהגדרת המתקדם של הווידגט תחת רקע.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  gsap.registerPlugin(ScrollTrigger);

  document.querySelectorAll('.gsap-title').forEach((heading) => {
    gsap.from(heading, {
      clipPath: "inset(0% 0% 0% 100%)",
			ease: "power4.out",
      scrollTrigger: {
        trigger: heading,
        start: "top 70%",
        end: "top 40%",
        markers: false,
        scrub: 1,
				
      },
    });
  });
});
</script>
[safe_code_display]

אם אתם כבר במוד למידה, קבלו הדרכות שוות נוספות:

gsap (56)
GSAP / Java Script

אנימציית תמונה נחשפת בגלילה + גלילה צידית

gsap (52)
שיווק ועסקי

תרגולילה #8 – עבודה מול לקוחות פרימיום

gsap (46)
אפקטי CSS

תרגולילה #7 – אנימציות ב-CSS והשקת סדנאות הספיישל

gsap (27) (1)
פיתוח

תרגולילה #6 – 12 שיטות לפיתוח מושלם