חיפוש ]

הוספת אנימציות CSS בגלילה באמצעות AOS

לבטח יצא לכם לראות אתרים בהם מתבצעות אנימציות שונות בזמן שאתם גוללים מטה (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 של אותו אלמנט):

Example Element

או למשל, אותה דוגמה אך עם זמן אנימציה (transition) ארוך יותר:

<div class="some-item" data-aos="fade" data-aos-duration="2500">Example Element</div>

התוצאה:

Example Element

כנראה והבנתם כי התכונה data-aos אחראית לסוג האנימציה שתתבצע. נשנה את האנימציה לצורך הדוגמה:

<div class="some-item" data-aos="flip-left" data-aos-duration="1500">Example Element</div>

והנה התוצאה:

Example Element

ניתן אף לקבוע השהייה לאלמנטים עם שימוש בפרמטר 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.

 

רועי יוסף
רועי יוסף

מפתח אתרים ותבניות וורדפרס. מספק אתרים עם ביצועים גבוהים, מותאמים למנועי חיפוש ובעלי קוד ולידי, סמנטי ונקי. צריכים עזרה? צרו איתי קשר.

  • אדיר פרץ 18 יוני 2021, 12:43

    אלוף
    מאמר איכותי ומפושט כמו שרק אתה יודע.

    • רועי יוסף 18 יוני 2021, 13:20

      אליפות אתה. לגבי השאלה במייל – אני לא מעביר קורסים אך בהחלט שוקל כי המון פונים אליי בהקשר, בין אם מכללות או אנשים פרטיים..

      • אדיר פרץ 20 יוני 2021, 9:13

        אשמח להיות הראשון במידה ותחליט שכן (:

תגובה חדשה

הוסיפו קוד באמצעות הכפתורים מטה. למשל, בכדי להוסיף PHP לחצו על הכפתור PHP והוסיפו את הקוד בתוך השורטקוד. מצאתם שגיאה בפוסט? עדכנו אותנו...