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

Bramus

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

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

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

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

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox Technology Preview: supported.
  • Safari: 26.

Source

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

הפרקים

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

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

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

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