CSS Scroll-driven Animations generatoru
Əvvəllər skroll animasiyaları üçün ağır JavaScript kitabxanaları (GSAP, ScrollMagic) tələb olunurdu. Artıq CSS-in animation-timeline: scroll() və view() xassələri ilə brauzerin daxili GPU gücündən istifadə edərək 60 FPS sürətlə tam təmiz CSS animasiyaları qura bilərsiniz.
/* 100% təmiz CSS ilə skroll animasiyası */
@keyframes revealCard {
from { opacity: 0; transform: translateY(40px) scale(0.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.card {
animation: revealCard linear both;
animation-timeline: view();
animation-range: entry 10% cover 40%;
}Necə istifadə etmək olar
- Rejimi seçin: «Oxuma proqresi» (scroll) yaxud «Blokların ekrana girməsi» (view).
- Pəncərəni yuxarı-aşağı sürüşdürərək (və ya avtomatik skroll düyməsini basaraq) animasiyanın skrolla necə bağlandığını izləyin.
- Effekt növünü dəyişin (Şəffaflıq + Qalxma, Böyümə, 3D Fırlanma və ya Rəng dəyişimi).
animation-rangediapazonunu (entry, cover, exit) fərdiləşdirin və hazır təmiz CSS kodunu kopyalayın.
Bu necə işləyir
animation-timeline: scroll() nə edir?
Standart @keyframes animasiyası zamana (məsələn, animation-duration: 2s) əsaslanır. animation-timeline: scroll() isə zaman oxunu səhifənin və ya konteynerin skroll mövqeyi ilə əvəzləyir: istifadəçi 0% mövqedə olanda animasiya 0%-də, 50% skroll edəndə animasiya tam ortasında dayanır.
scroll() ilə view() fərqi
scroll() bütün konteynerin və ya səhifənin ümumi skroll faizinə bağlanır (məsələn, yuxarıdakı oxuma proqres lenti üçün idealdır). view() isə konkret elementin ekran sahəsinə (viewport) nə vaxt daxil olub nə vaxt çıxdığını izləyir (scroll-triggered kartlar üçün əvəzolunmazdır).
/* Səhifənin yuxarı oxuma indikatoru */
.progress-bar {
scale: 0 1;
transform-origin: left;
animation: fillProgress linear;
animation-timeline: scroll();
}animation-range və GPU məhsuldarlığı
animation-range xassəsi animasiyanın dəqiq hansı nöqtədə başlayıb bitəcəyini təyin edir (məsələn, entry 0% cover 30%). Animasiya birbaşa brauzerin kompozisiya axınında (Compositor Thread) işlədiyi üçün əsas JavaScript axınını əsla dondurmur.
Tez-tez verilən suallar
JavaScript event listener (window.onscroll) tələb olunurmu?
Xeyr! Heç bir JS scroll hadisəsi və ya IntersectionObserver tələb olunmur. Bütün hesablama brauzerin daxili CSS mühərrikində aparılır.
Brauzer dəstəyi necədir?
Chrome 115+, Edge 115+ və Opera bu xüsusiyyəti tam dəstəkləyir (Chromium ekosistemi, 75%+ qlobal pay). Digər brauzerlər üçün @supports (animation-timeline: scroll()) yoxlaması ilə rahat fallback yazılır.
prefers-reduced-motion ilə necə işləməlidir?
Həssas istifadəçilər üçün @media (prefers-reduced-motion: reduce) daxilində animation: none !important; verilməsi qızıl standartdır.
