Jak dodać animacje sekcji przy użyciu AOS?

Wysuwane sekcje na stronie głównej powodują, że twoja strona internetowa jest lepsza w odbiorze i przyciąga bardziej potencjalnego klienta. Tutaj dowiesz się zatem jak dodawać wysuwane sekcje, a także animować poszczególne elementy, aby działały po "rolce" myszki czyli scrollu. Do wykonania wjeżdżającej sekcji przysłużymy się biblioteką "AOS".
2022-04-08 13:14
2 minuty czytania

ZAŁĄCZANIE/INSTALACJA

Na samym początku dodajemy styl do “head”: (Ostatnia linijka na zdjęciu)

Następnie musimy załączyć JS’a do strony oraz zinicjalizować działanie.


LISTA DOSTĘPNYCH ANIMACJI

Aby dodać animacje do danej sekcji, bądź elementu należy wybrać animacje. Poniżej lista gotowych animacji:

FADE
fade, fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right
fade-down-left

FLIP
flip-up, flip-down, flip-left, flip-right

SLIDE
slide-up, slide-down, slide-left, slide-right

ZOOM
zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right, zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right


DODAWANIE ANIMACJI

Aby dodać animacje musimy na samym początku wybrać element, który ma ją otrzymać. Przykładowo ja wybrałem: 

Po wyborze elementu oraz typu animacji możemy przejść do jej załączania. Najważniejszą rzeczą, która powoduje, że do danego elementu zostanie przypisana animacja jest dodanie frazy: “data-aos=” do wybranego elementu. Przykładowo wybiorę sobie jedną z powyższych animacji i przypiszę ją do wyżej przytoczonego elementu mojej strony:



Spowoduje to wywołanie animacji “fade-left” na nagłówku h2. W tym przypadku animacja to wjeżdżanie nagłówku od lewej strony.


PARAMETRY ANIMACJI

Biblioteka AOS (Animate on scroll) pozwala nam na ustawienie różnych właściwości dla danej animacji takich jak np. czas trwania animacji. Poniżej przedstawiam listę parametrów oraz ich przykładowe uzupełnienie

data-aos="fade-left"
data-aos-offset="300"
data-aos-delay="50"
data-aos-duration="2500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="center-center"

Skoro jesteśmy przy parametrach to warto wspomnieć o typach, które możemy podać przy parametrach “easing” oraz “anchor-placement”.

Anchor placements:
top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

Easing:
linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart


WŁASNE ANIMACJE

Jesteśmy również w stanie dodać własne animacje, które będą wywoływane po scrollu! Jest to bardzo fajna opcja, która daje nam duże pole do popisu.
Na samym początku musimy zdefiniować nazwę naszej animacji. Robimy to za pomocą [data-aos=”nazwa_animacji”]. Następnie po prostu tworzymy naszą animację. Przykładowa prosta animacja:


USTAWIENIA PRZY INICJALIZACJI

Inicjalizując mamy możliwość ustawienia pewnych parametrów. 

Napisz do nas

Wybierz plik

Blog Artykuły
Ustawienia dostępności
Wysokość linii
Odległość między literami
Wyłącz animacje
Przewodnik czytania
Czytnik
Wyłącz obrazki
Skup się na zawartości
Większy kursor
Skróty klawiszowe