Animacje odkrywania

Animowanie elementów

Klasy animujące elementy.

Animacje działają poprzez ustawienie elementowi początkowych wartości właściwości CSS, takich jak przezroczystość, przesunięcie czy skala. Gdy element pojawi się w widocznym obszarze strony, Intersection Observer automatycznie nadpisuje te wartości docelowymi, a dzięki zdefiniowanym przejściom CSS (transitions) przeglądarka płynnie animuje zmianę pomiędzy stanem początkowym i końcowym. Takie podejście pozwala łatwo tworzyć własne efekty, wykorzystując standardowe właściwości CSS.

`io-anim`

Klasa bazowa dla elementów animowanych za pomocą Intersection Observer. Ustawia domyślne właściwości i przygotowuje element do działania animacji.

Każdy element, który ma być animowany, musi posiadać klasę io-anim. Pozostałe klasy, takie jak ustawienia efektu, opóźnienia czy czasu trwania animacji, rozszerzają jej działanie.

Klasę działa tylko na elemencie z lub w elemencie z klasą io

Poniższa tabela zawiera docelowe wartości właściwości CSS. Po aktywacji animacji element będzie płynnie przechodził od wartości początkowych do wartości przedstawionych w tabeli.

Klasa	Styl CSS
`io-anim`	`opacity: 1; transform: translateX(0px) translateY(0px) scale(1)',`

`io-fade-in`

Ustawienie elementu jako przezroczysty na starcie

Klasa	Styl CSS
`io-fade-in`	`opacity: 0;`

`io-slide-left`

Ustawienie elementu w prawo, aby wsuwał się od lewej strony. Wartość procentowa oznacza szerokość animowanego elementu.

Klasa	Styl CSS
`io-slide-left`	`transform: translateX(100%);`
`io-slide-left-full`	`transform: translateX(100%);`
`io-slide-left-half`	`transform: translateX(50%);`
`io-slide-left-quarter`	`transform: translateX(25%);`
`io-slide-left-<dim>`	`transform: translateX(<dim>);`
`io-slide-left--<var>`	`transform: translateX(--<var>);`

`io-slide-right`

Ustawienie elementu w lewo, aby wsuwał się od prawej strony. Wartość procentowa oznacza szerokość animowanego elementu.

Klasa	Styl CSS
`io-slide-right`	`transform: translateX(-100%);`
`io-slide-right-full`	`transform: translateX(-100%);`
`io-slide-right-half`	`transform: translateX(-50%);`
`io-slide-right-quarter`	`transform: translateX(-25%);`
`io-slide-right-<dim>`	`transform: translateX(-1 * <dim>);`
`io-slide-right--<var>`	`transform: translateX(calc(-1 * var(--<var>)));`

`io-slide-up`

Ustawienie elementu w dół, aby wsuwał się do góry. Wartość procentowa oznacza wysokość animowanego elementu.

Klasa	Styl CSS
`io-slide-up`	`transform: translateY(100%);`
`io-slide-up-full`	`transform: translateY(100%);`
`io-slide-up-half`	`transform: translateY(50%);`
`io-slide-up-quarter`	`transform: translateY(25%);`
`io-slide-up-<dim>`	`transform: translateY(<dim>);`
`io-slide-up--<var>`	`transform: translateY(--<var>);`

`io-slide-down`

Ustawienie elementu w górę, aby wsuwał się w dół. Wartość procentowa oznacza wysokość animowanego elementu.

Klasa	Styl CSS
`io-slide-down`	`transform: translateY(100%);`
`io-slide-down-full`	`transform: translateY(-100%);`
`io-slide-down-half`	`transform: translateY(-50%);`
`io-slide-down-quarter`	`transform: translateY(-25%);`
`io-slide-down-<dim>`	`transform: translateY(-1 * <dim>);`
`io-slide-down--<var>`	`transform: translateY(calc(-1 * var(--<var>)));`

Przykłady animacji

<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ę io-slide-left</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-center pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p 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="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację io-slide-right</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-center pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-right io-fade-in maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację io-slide-up</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-center pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-up io-fade-in maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
    <div class="h-screen flexsize-const d-flex items-center justify-center">Przewiń, aby zobaczyć animację io-slide-down</div>
    <div class="io io-60 io-repeat h-screen d-flex items-center justify-center pos-rel">
        <div class="pos-abs d-flex bgcolor-black/3 top-0 h-60p left-0 right-0">Threshold</div>
        <img class="io-anim io-slide-down io-fade-in maxh-200px w-auto border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
    </div>
</div>