הכירו את "שחררו את העוצמה של אנימציות מונעות גלילה"

Bramus

אנחנו גאים להכריז על ההשקה של "Unleash the Power of Scroll Animations", קורס סרטונים בן 10 חלקים שמציג את כל המידע על אנימציות מונעות גלילה באמצעות CSS או JavaScript.

אפשר לצפות בסדרה ב-YouTube. הפרק הראשון מוטמע כאן.

אנימציות שמבוססות על גלילה?

בעזרת אנימציות מבוססות-גלילה, אפשר להשתמש באנימציה קיימת של CSS או WAAPI וליצור אנימציה בזמן גלילה. לכן אנימציות מבוססות-גלילה מקבלות את כל היתרונות שממשקי ה-API האלה מציעים. האיסור הזה כולל אנימציות שמבוססות על מהירות גלילה באמצעות חומרה שלא כפופות לבעיות בממשק (jank) כשה-thread הראשי נחסם.

אנימציות מבוססות גלילה זמינות ב-Chrome מגרסה 115 והן מושלמות לשיפור הדרגתי.

תמיכה בדפדפן

  • 115
  • 115
  • x

מקור

צפו בסדרת הסרטונים או קראו את התיעוד לקבלת מידע נוסף על אנימציות מונעות גלילה.

הפרקים

הקורס מורכב מ-10 פרקים ומחולק לשני חלקים גדולים: הסבר על העקרונות הבסיסיים שמהם מורכבת אנימציות מונעות גלילה, ולאחר מכן כמה יישומים מעשיים.

  1. פרק 1: מבוא.
  2. פרק 2: תפיסות ליבה: scroll() ו-ScrollTimeline.
  3. פרק 3: תפיסות ליבה: view() ו-ViewTimeline.
  4. פרק 4: עקרונות הליבה: הסרת המסתורין של טווחי ציר הזמן.
  5. פרק 5: עקרונות הליבה: חיפוש ציר זמן וצירי זמן בעלי שם.
  6. פרק 6: אפליקציה מעשית: הוספת צלליות לגלילה למאגר גלילה.
  7. פרק 7: אפליקציה מעשית: אנימציה של אלמנטים בכיוונים שונים.
  8. פרק 8: אפליקציה מעשית: אנימציה של מודלים תלת-ממדיים ועוד ב- Scroll.
  9. פרק 9: אפליקציה מעשית: זיהוי מהירות גלילה.
  10. פרק 10: סיום.

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

מקורות מידע נוספים