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

Bramus

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

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

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

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

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • 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: סיום.

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

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