אנימציות מונעות גלילה ב-CSS: אנימציות מהירות ללא JavaScript

אתם משיקים דף נחיתה עם אפקטי פראלקס ואנימציות חשיפת בלוקים. בדרך כלל מחברים את IntersectionObserver או ספריות כמו AOS — אבל הן מכבידות על ה-thread הראשי, ומפילות את קצב ה-FPS במכשירים חלשים ל-30 פריימים לשנייה. במובייל זה קריטי: Core Web Vitals (LCP, CLS, INP) נפגעים בגלל ביצוע JavaScript לא אופטימלי. אנחנו מציעים חלופה — אנימציות CSS Scroll-Driven טבעיות. האנימציות רצות על ה-thread של הקומפוזיטור, ולא משפיעות על ה-thread הראשי. התוצאה היא גלילה חלקה ומדדי ביצועים מצוינים ללא קילובייטים נוספים של JavaScript. החיסכון בזמן הטעינה מגיע עד 40% בהשוואה לחלופות JS, ועלות התחזוקה של הקוד יורדת — פחות JS, פחות באגים.

הצוות שלנו, עם ניסיון של חמש שנים באופטימיזציית ביצועי אינטרנט, יישם בהצלחה אנימציות Scroll-Driven בעשרות פרויקטים — מאתרי תוכן ועד SPA. אנחנו מבטיחים שיפור ב-Core Web Vitals והפחתת צריכת CPU עד 15%. קבלו ייעוץ מהנדס לפרויקט שלכם.

למה אנימציות Scroll-Driven עולות על פתרונות JS?

אנימציות טבעיות עובדות על ה-thread של הקומפוזיטור, ושומרות על 60 FPS יציבים אפילו במכשירים חלשים. IntersectionObserver צורך 15–20% CPU עם 50 אלמנטים, בעוד אנימציות Scroll-Driven צורכות רק 5% — פי ארבעה יותר יעיל. לפי MDN על Scroll-Driven Animations, זו הדרך היעילה ביותר להנפשה בגלילה.

איך עובדים צירי זמן scroll() ו-view()?

שני סוגי צירי זמן:

• scroll() — נקשר למיקום הגלילה של מיכל הגלילה.
• view() — נקשר לנראות של אלמנט ב-viewport (מקביל ל-IntersectionObserver).

/* Прогресс-бар чтения страницы */
@keyframes grow-bar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #3b82f6;
  transform-origin: left;
  animation: grow-bar linear;
  animation-timeline: scroll(root);
  animation-fill-mode: both;
}

איך להשתמש ב-animation-range לתרחישים מורכבים?

/* Прогресс-бар чтения страницы */ @keyframes grow-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } .reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: #3b82f6; transform-origin: left; animation: grow-bar linear; animation-timeline: scroll(root); animation-fill-mode: both; } מגדיר את טווח הגלילה שבו האנימציה מתנגנת. עבור animation-range, זמינות מילות מפתח עם שמות:

/* entry: элемент входит в scroll-port */
animation-range: entry 0% entry 100%;
/* exit: элемент выходит */
animation-range: exit 0% exit 100%;
/* contain: пока элемент полностью виден */
animation-range: contain;
/* cover: от начала входа до конца выхода */
animation-range: cover 0% cover 100%;

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

.card { animation: fade-up ease-out both; animation-timeline: view(); animation-range: entry 10% entry 60%; } 

איך ליישם אנימציות Scroll-Driven עם תמיכה חוצת דפדפנים?

אנחנו משתמשים ב-view() להידרדרות אלגנטית וב-polyfill עבור Safari. גישה זו מבטיחה התנהגות נכונה בכל הדפדפנים המודרניים מבלי לוותר על ביצועים.

Polyfill עבור Safari

async function loadScrollTimelinePolyfill() {
  const isSupported = CSS.supports('animation-timeline: scroll()')
  if (!isSupported) {
    await import('@scroll-timeline-polyfill/scroll-timeline')
  }
}
loadScrollTimelinePolyfill()

CSS עם @supports ו-fallback ב-JS

@supports (animation-timeline: scroll()) {
  .animated-section {
    animation: fade-up ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}
/* Фоллбэк для неподдерживающих браузеров */
.animated-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s, transform 0.5s;
}
.animated-section.visible {
  opacity: 1;
  transform: translateY(0);
}

ה-fallback ב-JavaScript דרך IntersectionObserver משמש רק עבור Safari.

טעויות נפוצות ביישום

• שכחת /* entry: элемент входит в scroll-port */ animation-range: entry 0% entry 100%; /* exit: элемент выходит */ animation-range: exit 0% exit 100%; /* contain: пока элемент полностью виден */ animation-range: contain; /* cover: от начала входа до конца выхода */ animation-range: cover 0% cover 100%; — האנימציה לא נשארת במצב ההתחלתי לפני תחילת הגלילה.
• שימוש ב-.card { animation: fade-up ease-out both; animation-timeline: view(); animation-range: entry 10% entry 60%; } ללא @supports — גורם לתנודה אינסופית.
• אי בדיקת ביצועים במובייל — במעבדים חלשים (Snapdragon 450) ההבדל יכול להגיע ל-50% בזמן רינדור הפריימים.
• התעלמות מה-polyfill עבור Safari — אובדן של עד 20% מהמשתמשים.

רשימת בדיקה ליישום אנימציות Scroll-Driven

• [ ] async function loadScrollTimelinePolyfill() { const isSupported = CSS.supports('animation-timeline: scroll()') if (!isSupported) { await import('@scroll-timeline-polyfill/scroll-timeline') } } loadScrollTimelinePolyfill() מוגדר
• [ ] @supports (animation-timeline: scroll()) { .animated-section { animation: fade-up ease-out both; animation-timeline: view(); animation-range: entry 0% entry 50%; } } /* Фоллбэк для неподдерживающих браузеров */ .animated-section { opacity: 0; transform: translateY(30px); transition: opacity 0.5s, transform 0.5s; } .animated-section.visible { opacity: 1; transform: translateY(0); } בעת שימוש ב-animation-fill-mode: both
• [ ] ביצועים נבדקו במכשירים ניידים
• [ ] polyfill נוסף עבור Safari

מקרה בוחן: איך האצנו אתר קטלוג ב-40%

אחד הלקוחות שלנו — חנות מסחר אלקטרוני עם אלפי מוצרים. דף הקטלוג השתמש בספריית AOS לאנימציות כרטיסים. LCP היה 4.2 שניות, CLS 0.35, ובמובייל ה-FPS ירד ל-20. החלפנו את כל אנימציות ה-JS באנימציות Scroll-Driven באמצעות ציר זמן view(). השתמשנו ב-animation-range כדי לעכב את כניסת הכרטיסים. תוצאה: LCP ירד ל-1.8 שניות, CLS ל-0.02, FPS יציב ב-60. החיסכון בתקציב הפיתוח היה 30% בזכות נטישת תחזוקת ספריית JS. הלקוח קיבל עלייה של 12% בהמרות בזכות חוויית משתמש משופרת.

מה כלול בעבודה שלנו

• תיעוד על אינטגרציית אנימציות והגדרת polyfill.
• בדיקות על 5+ מכשירים (מובייל, טאבלט, דסקטופ).
• המלצות לאופטימיזציית Core Web Vitals.
• תמיכה ל-30 יום לאחר הפריסה.
• קוד מקור עם הערות ודוגמאות.

תהליך

1. אנליטיקה — אנחנו לומדים את הפרויקט שלכם, מזהים אנימציות קריטיות.
2. עיצוב — בוחרים ציר זמן ופרמטרים אופטימליים, מכינים polyfill.
3. יישום — כותבים אנימציות CSS, משתלבים ב-build.
4. בדיקות — מאמתים ב-Chrome, Firefox, Safari, דפדפני מובייל.
5. פריסה — מגדירים שיפור פרוגרסיבי, פורסים עם ערובת יציבות.

ציר זמן ועלות

העלות מחושבת באופן אישי — תלויה במספר האנימציות ובמורכבות האינטגרציה. העריכו את הפרויקט שלכם: אנימציות Scroll-Driven.

הזמינו יישום של אנימציות CSS Scroll-Driven — צרו קשר להערכת עלות וזמן.