Kolejkowanie odtwarzania
Klasy kolejkowania umożliwiają uruchamianie animacji wielu elementów jeden po drugim, zamiast wszystkich jednocześnie. Elementy należące do tej samej kolejki są aktywowane z niewielkim odstępem czasu, tworząc płynny efekt sekwencyjnego pojawiania się. Rozwiązanie to doskonale sprawdza się w przypadku list, siatek, galerii oraz innych grup elementów, które mają być animowane w uporządkowany sposób podczas przewijania strony.
Domyślne opóźnienie kroku kolejki (czas od rozpoczęcia do odtworzenia elementu n-tego elementu to n * krok) wynosi: 200ms
io-queue-<name>
Dodaje element do kolejki animacji o podanej nazwie <name>.
Wszystkie elementy posiadające tę samą nazwę kolejki będą animowane sekwencyjnie – każdy kolejny element rozpocznie animację z określonym opóźnieniem. Pozwala to uzyskać efekt płynnego, uporządkowanego pojawiania się grupy elementów.
io-queue-delay-<time>
Opóźnie odtworzenie animacji na tym elemencie w kolejce o <time> * N milisekund.
N to nume rokreślony na podstawie kolejności elementu w DOM (pierwszy element ma N = 0, drugi N = 1 itd.)
Przykłady animacji
Przykład pokazuję jedną kolejkę odtwarzania elementów
<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ę</div>
<div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
<div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
<div class="grid-row-4 gap-4 px-4">
<img class="io-anim io-slide-up-200 io-fade-in io-queue-img io-duration-slow w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
<img class="io-anim io-slide-up-200 io-fade-in io-queue-img io-duration-slow w-auto border--solid fit-cover fitpos-center" src="/images/mountains.jpg">
<img class="io-anim io-slide-up-200 io-fade-in io-queue-img io-duration-slow w-auto border--solid fit-cover fitpos-center" src="/images/beach.jpg">
<img class="io-anim io-slide-up-200 io-fade-in io-queue-img io-duration-slow w-auto border--solid fit-cover fitpos-center" src="/images/city.jpg">
</div>
</div>
</div>Dwie kolejki, tak aby tekst wsuwał się po obrazku
<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ę</div>
<div class="io io-60 io-repeat h-screen d-flex items-center justify-start pos-rel">
<div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
<div class="grid-row-4 gap-4 px-4">
<div>
<img class="io-anim io-slide-down-200p io-fade-in io-queue-img io-duration-slow w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
<div class="io-anim io-slide-up io-fade-in io-queue-text io-delay-100 io-duration-snail-slow">Jeden</div>
</div>
<div>
<img class="io-anim io-slide-down-200p io-fade-in io-queue-img io-duration-slow w-auto border--solid fit-cover fitpos-center" src="/images/city.jpg">
<div class="io-anim io-slide-up io-fade-in io-queue-text io-delay-100 io-duration-snail-slow">Dwa</div>
</div>
<div>
<img class="io-anim io-slide-down-200p io-fade-in io-queue-img io-duration-slow w-auto border--solid fit-cover fitpos-center" src="/images/mountains.jpg">
<div class="io-anim io-slide-up io-fade-in io-queue-text io-delay-100 io-duration-snail-slow">Trzy</div>
</div>
<div>
<img class="io-anim io-slide-down-200p io-fade-in io-queue-img io-duration-slow w-auto border--solid fit-cover fitpos-center" src="/images/beach.jpg">
<div class="io-anim io-slide-up io-fade-in io-queue-text io-delay-100 io-duration-snail-slow">Cztery</div>
</div>
</div>
</div>
</div>