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.
