לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (On Scroll Animations). אז אשתף אתכם בספרייה בשם AOS (Animate On Scroll), המאפשרת להוסיף אנימציות אלו בקלות ועם שליטת CSS מלאה על אותן אנימציות.
הרעיון מאחורי AOS הוא די פשוט: לעקוב אחר כל האלמנטים והמיקום שלהם בהתאם להגדרות שסיפקתם, ולאחר מכן להוסיף או להסיר את הקלאס aos-animate המבצע את האנימציה לאלמנט הרלוונטי.
"בפועל, זה לא כזה פשוט כמו שזה נשמע" מציין מפתח הספרייה, אך הרעיון עצמו מאחוריה הוא פשוט וכל אספקט של אנימציה מתנהל באמצעות CSS בלבד.
כיצד להשתמש בספרייה AOS?
בתור התחלה, עליכם להוסיף את הקבצים הנחוצים בכדי ש-AOS תעבוד. הוסיפו את קובץ העיצוב ב-<head> של העמוד:
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css" />לאחר מכן הוסיפו את הסקריפט הנחוץ לפני תגית ה-</body> הסוגרת:
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>הדוגמאות לעיל משתמשות ב-aos@2.3.4, שהיא הגרסה היציבה האחרונה. ייתכן שתיתקלו ברשת בהפניות ל-aos@next – זהו גרסת בטא 3.0 שנמצאת בפיתוח כבר שנים. לאתרים בסביבת פרודקשן, השתמשו ב-2.3.4.
לא אסביר בפוסט זה כיצד להוסיף אלו בוורדפרס, דיברתי על כך רבות והבאתי בפוסטים קודמים המון דוגמאות. מוזמנים לתת מבט בפוסט הוספת CSS ו-JS באתרי וורדפרס. אם אתם מסתבכים מוזמנים לשאול כאן בתגובות ומבטיח לענות.
בכדי לחסוך לכם זמן, ניתן להוריד מקישור זה את שני הקבצים הרלוונטיים.
אתחול הספרייה AOS
בכדי לאתחל את הספרייה יש להשתמש בקוד הבא:
AOS.init();
ל-AOS מספר אפשרויות ולא נרחיב עליהן. ההערות בקוד מספקות הסבר מצוין.
הוספת אנימציה לאלמנט HTML
בואו ניתן מבט בדוגמה ונראה כיצד להוסיף אנימציה לאלמנט HTML כלשהו. בהנחה וטענתם את הספרייה כמו שצריך, קביעה כי אלמנט יבצע אנימציה מתבצעת בצורה הבאה:
<div class="some-item" data-aos="fade">Example Element</div>
התוצאה תהיה משהו בסגנון הבא (בהתאם ל-CSS של אותו אלמנט):
או למשל, אותה דוגמה אך עם זמן אנימציה (transition) ארוך יותר:
<div class="some-item" data-aos="fade" data-aos-duration="2500">Example Element</div>התוצאה:
כנראה והבנתם כי התכונה data-aos אחראית לסוג האנימציה שתתבצע. נשנה את האנימציה לצורך הדוגמה:
<div class="some-item" data-aos="flip-left" data-aos-duration="1500">Example Element</div>והנה התוצאה:
ניתן אף לקבוע השהייה לאלמנטים עם שימוש בפרמטר data-aos-delay. הנה שלושה כפתורים עם דיליי קצר ביניהם:
<div class="buttons-aos">
<button class="aos-button" data-aos="fade-up" data-aos-delay="0" data-aos-easing="ease-in-out">Button</button>
<button class="aos-button" data-aos="fade-up" data-aos-delay="500" data-aos-easing="ease-in-out">Button</button>
<button class="aos-button" data-aos="fade-up" data-aos-delay="1000" data-aos-easing="ease-in-out">Button</button>
</div>כך זה נראה:
שילוב אנימציות בתצוגה מעשית
הנה דוגמה מעשית יותר – רשת כרטיסים בסגנון דשבורד שבה כל כרטיס משתמש בסוג אנימציה שונה ודיליי מדורג, מה שיוצר אפקט חשיפה מדורג:
<div class="aos-card-grid">
<div class="card" data-aos="fade-up" data-aos-delay="0">...</div>
<div class="card" data-aos="fade-up" data-aos-delay="150">...</div>
<div class="card" data-aos="fade-up" data-aos-delay="300">...</div>
<div class="card" data-aos="zoom-in" data-aos-delay="450">...</div>
<div class="card" data-aos="zoom-in" data-aos-delay="600">...</div>
<div class="card" data-aos="zoom-in" data-aos-delay="750">...</div>
</div>התוצאה – גללו מטה כדי להפעיל את האנימציה:
הטכניקות העיקריות כאן: שילוב
fade-up לשורה הראשונה עם zoom-in לשנייה, ערכי data-aos-delay מדורגים שיוצרים אפקט גל, ו-data-aos-duration משותף ששומר על קצב אחיד.אנימציות זמינות
AOS מגיעה עם סט מוכן של אנימציות מובנות שניתן להשתמש בהן מיד. הנה הקבוצות העיקריות:
- Fade:
fade,fade-up,fade-down,fade-left,fade-right,fade-up-right,fade-up-left,fade-down-right,fade-down-left - Flip:
flip-up,flip-down,flip-left,flip-right - Slide:
slide-up,slide-down,slide-left,slide-right - Zoom:
zoom-in,zoom-in-up,zoom-in-down,zoom-in-left,zoom-in-right,zoom-out,zoom-out-up,zoom-out-down,zoom-out-left,zoom-out-right
כל אנימציה מקבלת פרמטרים כגון data-aos-duration, data-aos-delay, data-aos-easing ו-data-aos-offset לכיוונון עדין של ההתנהגות.
אפשרויות הקונפיגורציה של AOS
בעת אתחול AOS, ניתן להעביר אובייקט הגדרות לשליטה בהתנהגות הגלובלית. הנה דוגמה מלאה עם כל האפשרויות הזמינות:
AOS.init({
// Global settings:
disable: false, // accepts: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // event that triggers AOS initialization
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, adds data-aos value as classes on scroll
disableMutationObserver: false, // disables automatic mutation detection (advanced)
debounceDelay: 50, // debounce delay on window resize (advanced)
throttleDelay: 99, // throttle delay on scroll (advanced)
// Per-element settings (overridable via data-aos-* attributes):
offset: 120, // offset (in px) from the trigger point
delay: 0, // values from 0 to 3000, step 50ms
duration: 400, // values from 0 to 3000, step 50ms
easing: 'ease', // default easing for animations
once: false, // whether animation runs only once while scrolling down
mirror: false, // whether elements animate out while scrolling past them
anchorPlacement: 'top-bottom', // which position of the element triggers the animation
});
הגדרה נפוצה לסביבת פרודקשן היא לקבוע once: true כך שהאנימציות יפעלו פעם אחת ולא יחזרו בכל פעם שהמשתמש גולל חזרה למעלה. זה מרגיש פחות מסיח את הדעת ומשפר את ביצועי הגלילה.
הוספת אנימציה משלכם ל-AOS
אם האנימציות שהספרייה מספקת אינן מספיקות, מכיוון שכל האנימציות מתבצעות ב-CSS, באפשרותכם להוסיף אנימציה משלכם ל-AOS בצורה פשוטה.
[data-aos="new-animation"] {
opacity: 0;
transition-property: transform, opacity;
}
[data-aos="new-animation"].aos-animate {
opacity: 1;
}
@media screen and (min-width: 768px) {
[data-aos="new-animation"] {
transform: translateX(100px);
}
[data-aos="new-animation"].aos-animate {
transform: translateX(0);
}
}
ואז ניתן להשתמש באנימציה זו בצורה הבאה:
<div data-aos="new-animation"></div>נגישות
אנימציות גלילה עלולות להיות בעייתיות למשתמשים רגישים לתנועה. דפדפנים מודרניים תומכים ב-prefers-reduced-motion media query, ומומלץ לכבד הגדרה זו. AOS מקלה על כך עם האפשרות disable:
AOS.init({
disable: window.matchMedia('(prefers-reduced-motion: reduce)').matches
});
קוד זה משבית את כל אנימציות AOS כאשר המשתמש ביקש הפחתת תנועה בהגדרות מערכת ההפעלה שלו.
אנימציות גלילה נייטיב ב-CSS
ראוי לציין כי דפדפנים מתחילים לתמוך באנימציות גלילה נייטיב באמצעות ה-property של animation-timeline עם הפונקציות scroll() ו-view(). זה מאפשר לקשר אנימציות CSS להתקדמות הגלילה ללא צורך ב-JavaScript כלל.
נכון לתחילת 2026, Chrome, Edge ו-Safari תומכים בפיצ'ר זה, אך ב-Firefox הוא עדיין מושבת כברירת מחדל. לתמיכה רחבה בדפדפנים, AOS נשארת בחירה אמינה. עקבו אחר animation-timeline ככל שהיא מתבגרת – ייתכן שבסופו של דבר היא תחליף לחלוטין ספריות JavaScript לאנימציות גלילה.
שאלות נפוצות
שאלות נפוצות בנושא AOS ואנימציות גלילה:
aos@next) נמצאת בפיתוח אך טרם הגיעה לגרסה יציבה.once: true כך שהאנימציות ירוצו פעם אחת בלבד, והימנעו מאנימציה של עשרות אלמנטים באותו עמוד.AOS.init() ב-hook של mounted או useEffect, והוסיפו תכונות data-aos לאלמנטים ב-JSX או בתבנית. אם ה-DOM משתנה דינמית, קראו ל-AOS.refresh() לאחר העדכונים כדי ש-AOS תזהה את האלמנטים החדשים.prefers-reduced-motion עם AOS?
disable. לדוגמה: AOS.init({ disable: window.matchMedia('(prefers-reduced-motion: reduce)').matches }). קוד זה מכבה את כל אנימציות הגלילה כאשר המשתמש הפעיל הפחתת תנועה בהגדרות מערכת ההפעלה.once לבין mirror ב-AOS?
once קובעת האם האנימציה תפעל רק בגלילה הראשונה מטה. כשהיא מוגדרת ל-true, האלמנט מבצע אנימציה פעם אחת ונשאר גלוי. האפשרות mirror קובעת האם אלמנטים יבצעו אנימציה הפוכה כשגוללים מעבר להם. כברירת מחדל שתיהן false, כך שהאנימציות חוזרות בכל פעם שהאלמנט נכנס לאזור הצפייה.[data-aos="שם-האנימציה-שלכם"] עם המצב ההתחלתי, וכלל נוסף עבור [data-aos="שם-האנימציה-שלכם"].aos-animate עם המצב הסופי. לאחר מכן השתמשו ב-data-aos="שם-האנימציה-שלכם" על כל אלמנט. מכיוון שכל האנימציות מבוססות CSS, יש לכם שליטה מלאה על transforms, opacity ו-transitions.סיכום
AOS היא ספרייה קלת משקל מבוססת CSS שהופכת את הוספת אנימציות הגלילה לפשוטה. הגדירו את התכונה data-aos על כל אלמנט, אתחלו את הספרייה, וסיימתם. לסביבת פרודקשן, השתמשו בגרסה 2.3.4, הגדירו once: true לחוויה נקייה יותר, וזכרו להשבית אנימציות למשתמשים שמעדיפים הפחתת תנועה.
עוד מידע על אפשרויות הספרייה, על האנימציות הזמינות ועל כל הפרמטרים ניתן למצוא בעמוד הגיטהאב של AOS.
אלוף
מאמר איכותי ומפושט כמו שרק אתה יודע.
אליפות אתה. לגבי השאלה במייל – אני לא מעביר קורסים אך בהחלט שוקל כי המון פונים אליי בהקשר, בין אם מכללות או אנשים פרטיים..
אשמח להיות הראשון במידה ותחליט שכן (: