מכינים את האתר לאנימציות
שלוש הגדרות קצרות שצריך לבצע פעם אחת בלבד.
בחרו לשונית והשלימו את ההגדרה המתאימה.
כל אנימציה בספרייה כוללת שלושה חלקים: HTML, CSS ו־JavaScript. הדרך הפשוטה ביותר היא לרכז את שלושתם בתוך ווידג׳ט HTML אחד.
<style>
/* הדביקו כאן את קוד ה־CSS */
</style>
<!-- באלמנט html הדביקו את הקוד של הסקריפט -בקוד של אלמנטור או -->
<script>
/* הדביקו כאן את קוד ה־JavaScript */
</script>
אם האנימציה מופיעה ופועלת בעמוד החי ללא שגיאות או קפיצות בפריסה, ההתקנה הושלמה בהצלחה.
GSAP היא ספריית האנימציה שמפעילה את מרבית האנימציות המתקדמות ב־ZAKAI LAB.
יש לחבר אותה לאתר פעם אחת בלבד. לאחר החיבור ניתן להשתמש בה בכל עמוד ובכל ווידג׳ט HTML.
1. היכנסו ללוח הבקרה של WordPress.
2. עברו אל **Elementor ← Custom Code**.
3. לחצו על **Add New**.
4. תנו לקוד את השם:
"`text
GSAP Global
"`
5. בחרו את מיקום הטעינה:
"`text
<head>
"`
6. הדביקו את הקוד הבא:
"`html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
"`
7. לחצו על **Publish**.
8. בתנאי התצוגה בחרו:
"`text
Entire Site
"`
* יש להוסיף את GSAP פעם אחת בלבד.
* אין להדביק מחדש את קישור הטעינה בתוך כל אנימציה.
* קוד GSAP חייב להיטען לפני קוד האנימציה.
* אם באתר מותקנים תוסף Cache או תוסף אופטימיזציה, מומלץ לנקות את המטמון לאחר החיבור.
פתחו עמוד באתר, הפעילו את כלי המפתחים של הדפדפן וכתבו בחלון Console:
"`javascript
gsap.version
"`
אם מתקבל מספר גרסה, GSAP מחובר ופועל באתר.
אם מופיעה השגיאה:
"`text
gsap is not defined
"`
GSAP עדיין אינו נטען, או שקוד האנימציה מופעל לפני טעינת הספרייה.
ScrollTrigger הוא תוסף של GSAP המחבר בין האנימציה לבין הגלילה בעמוד.
הוא אינו כלול בקובץ הבסיס של GSAP ולכן צריך לטעון אותו בנפרד, אך רק פעם אחת לכל האתר.
1. היכנסו ללוח הבקרה של WordPress.
2. עברו אל **Elementor ← Custom Code**.
3. פתחו את הקוד ששמרתם בשם:
"`text
GSAP Global
"`
"`html
<!– GSAP Core –>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<!– ScrollTrigger –>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<!– Register ScrollTrigger –>
<script>
gsap.registerPlugin(ScrollTrigger);
</script>
"`
5. ודאו שמיקום הקוד מוגדר כ־:
"`text
<head>
"`
6. ודאו שתנאי התצוגה מוגדר כ־:
"`text
Entire Site
"`
7. עדכנו את הקוד ונקו את המטמון של האתר.
* GSAP חייב להיטען לפני ScrollTrigger.
* יש לרשום את התוסף באמצעות:
"`javascript
gsap.registerPlugin(ScrollTrigger);
"`
* החיבור מתבצע פעם אחת בלבד לכל האתר.
* אין להוסיף את קישורי הטעינה מחדש בתוך כל אנימציה.
* אנימציות שאינן תלויות בגלילה אינן חייבות להשתמש ב־ScrollTrigger.
פתחו עמוד באתר וכתבו בחלון Console:
"`javascript
ScrollTrigger.version
"`
אם מתקבל מספר גרסה, ScrollTrigger מחובר ופועל.
אם מופיעה השגיאה:
"`text
ScrollTrigger is not defined
"`
קובץ התוסף אינו נטען, או שהוא נטען לפני קובץ GSAP.