גם את פספסת את זה?

תלמידה חרוצה שלי

ברכה כהנר

יצרה אפקט אלוף

שהוא קליל וכיף,

ולכן מתאים לי בול

לתת לך הדרכה עליו.

זה האפקט:

נכון שימושי ומדליק?

שימי משפט מסקרן

שיגרום לגולש לזוז באתר

ו…

הכל כבר ירוץ הלאה…

אז איך תכלס עושים את זה?

ביצעתי שם כמה שינויים

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

צרי אלמנט כותרת באלמנטור

במתקדם -> CSS ID תמלאי את הערך: text-to-change

בכותרת הזו שימי את הטקסט שתרצי שיראו לפני הלחיצת כפתור.

צרי מתחתיו אלמנט נוסף מסוג כפתור

ושם במתקדם -> CSS ID שימי את הערך: text-to-change-btn

מתחת לכל זה,

צרי אלמנט חדש מסוג HTML

ושימי בתוכו את הקוד הבא:

				
					<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/TextPlugin.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", (event) => {
		gsap.registerPlugin(TextPlugin)
	});
    jQuery('#text-to-change-btn').click(animateText);
    function animateText() {
       elem = jQuery('#text-to-change h2');
       gsap.to(elem, {
          duration: 2,
          text: "אתרי אינטרנט מורכבים, ואפליקציות חדשניות!",
          ease: "none",
        });
        jQuery('#text-to-change-btn').fadeOut();
    }
   
</script>
				
			
 

במקום המילים "אתרי אינטרנט מורכבים וכו'" בקוד

שימי את הטקסט שאת רוצה

שיתגלה אחרי לחיצת הכפתור.

זהו :)

נכון מושלם?

2 תגובות

כתיבת תגובה

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

כניסה לאזור האישי

חייב להיות באנגלית