Wprowadzenie
Klasy umożliwiają animowanie elementów w momencie, gdy pojawiają się w widocznym obszarze strony podczas przewijania.
Wykorzystują mechanizm Intersection Observer (stąd prefiks wszystkich klas io-), który wykrywa, czy element znajduje się w obszarze widocznym dla użytkownika.
io
Klasa nie ustawia na elemencie stylu, jest oznaczeniem elementu, który ma być obserwowany przez skrypt. Aby animować element lub elementy wewnątrz konieczne jest dodanie tej klasy.
Dodanie klasy io automatycznie ustawia domyślny threshlold na 20%.
io-<int>
Określa próg widoczności (threshold) elementu, przy którym zostaną uruchomione akcje związane z Intersection Observer.
Wartość oznacza, jaki procent elementu musi znajdować się w widocznym obszarze strony, aby został uznany za widoczny.
Przykładowo io-10 oznacza, że element zostanie aktywowany, gdy widoczne będzie co najmniej 10% jego powierzchni,
natomiast io-100 dopiero wtedy, gdy cały element znajdzie się w obszarze widocznym dla użytkownika.
Klasę działa tylko na elemencie z klasą io
io-repeat
Domyślnie animacje uruchamiane przez Intersection Observer są wykonywane tylko raz – po pierwszym pojawieniu się elementu w widocznym obszarze strony pozostają w swoim końcowym stanie.
Klasa io-repeat powoduje, że po opuszczeniu przez element obszaru widocznego animacja zostaje zresetowana. Dzięki temu zostanie ponownie odtworzona przy każdym kolejnym pojawieniu się elementu na ekranie.
Klasę działa tylko na elemencie z klasą io
Przykład zmiennego threshold
Poniższy przykład pokazuje animowanie elemnentów przy różnej wartości threshold, które ustawione jest poprzez io-<int>
<div class="d-flex flex-column w-full o-hidden">
<div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację elementów</div>
<div class="io io-repeat h-screen d-flex items-center justify-center pos-rel">
<div class="pos-abs d-flex bgcolor-black/3 top-0 h-20p left-0 right-0">Threshold</div>
<img class="io-anim io-slide-left io-fade-in maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
</div>
<div class="io io-50 io-repeat h-screen d-flex items-center justify-center pos-rel">
<div class="pos-abs d-flex bgcolor-black/3 top-0 h-50p left-0 right-0">Threshold</div>
<img class="io-anim io-slide-left io-fade-in maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
</div>
<div class="io io-100 io-repeat h-screen d-flex items-center justify-center pos-rel">
<div class="pos-abs d-flex bgcolor-black/3 top-0 h-100p left-0 right-0">Threshold</div>
<img class="io-anim io-slide-left io-fade-in maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
</div>
</div>