לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (On Scroll Animations). אז אשתף אתכם בספרייה בה נתקלתי בשם AOS, המאפשרת להוסיף אנימציות אלו בקלות ועם שליטת CSS מלאה על אותן אנימציות.
הרעיון מאחורי AOS הוא די פשוט: לעקוב אחר כל האלמנטים והמיקום שלהם בהתאם להגדרות שסיפקתם ולאחר מכן, להוסיף/להסיר את הקלאס aos-animate המבצע את האנימציה לאלמנט הרלוונטי.
"בפועל, זה לא כזה פשוט כמו שזה נשמע" מציין מפתח התוסף, אך הרעיון עצמו מאחורי ספרייה זו הוא פשוט וכל אספקט של אנימציה מתנהל באמצעות CSS בלבד.
כיצד להשתמש בספרייה AOS?
בתור התחלה, עליכם להוסיף את הקבצים הנחוצים בכדי ש AOS תעבוד. הוסיפו את קובץ העיצוב ב <head> של העמוד:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />לאחר מכן הוסיפו את הסקריפט הנחוץ לפני סגירת תגית ה </body> הסוגרת:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>לא אסביר בפוסט זה כיצד להוסיף אלו בוורדפרס, דיברתי על כך רבות והבאתי בפוסטים קודמים המון דוגמאות. מוזמנים לתת מבט בפוסט הוספת CSS ו JS באתרי וורדפרס. אם אתם מסתבכים מוזמנים לשאול כאן בתגובות ומבטיח לענות.
בכדי לחסוך לכם זמן, ניתן להוריד מקישור זה את שני הקבצים הרלוונטים.
אתחול הספרייה AOS
בכדי לאתחל את הספרייה יש להשתמש בקוד הבא:
AOS.init();
ל AOS מספר אפשרויות ולא נרחיב עליהן. ההערות בקוד מספקות הסבר מצויין:
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
הוספת אנימציה לאלמנט 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>כך זה נראה:
הוספת אנימציה משלכם ל 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>עד כאן. עוד מידע על אפשרויות הספרייה, על האנימציות שניתן לבצע ועל כל הפרמטרים ניתן למצוא בעמוד הגיטהאב של AOS.
