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

Bramus

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

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

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

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

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

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: Outro.

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

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