Jak dodać efekt pojawiania się elementów podczas przewijania strony internetowej?

Każda osoba, która przegląda Internet musiała spotkać się z efektem tzw. pojawiającej się treści. Niektórzy z nas mogli wtedy pomyśleć: Jak stworzyć coś takiego? 🙂

Otóż sposobów jest wiele. Ja przez długi czas korzystałem z połączenia Animate.css oraz Viewport Checker, biblioteki opierającej się na jQuery. Niektórzy zamiast tego drugiego używają tzw. Waypoints, z kolei jeszcze inni zastępują wszystko znaną, ale od dłuższego czasu płatną biblioteką WOW.js.

Te sposoby są dobre, ale dziś chciałbym Ci pokazać inną, bardzo prostą i dodatkowo stworzoną przez polskiego dewelopera bibliotekę o nazwie Animate On Scroll.

Jeśli jesteś zainteresowany jakie animacje oferuje ta biblioteka, to zapraszam Cię na stronę twórcy. :)

Jak zainstalować AOS?

Jesteśmy w stanie zrobić to np. za pomocą Boweranpm lub Yarna. Jeśli używamy Bowera, to wpiszemy taką oto komendę:

bower install aos --save

…w przypadku npm:

npm install aos --save

…a jeśli chodzi o Yarn:

yarn add aos

Oczywiście poza tym możemy ręczenie pobrać paczkę z plikami naszej biblioteki lub dołączyć je z linku (przykład znajduje się poniżej).


Dołączanie biblioteki do strony internetowej.

W moim przypadku wszystko zostanie dodane z odnośnika do strony biblioteki (oczywiście możemy to zastąpić ścieżką do plików). Zacznijmy od stylów CSS:

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

Gdy już je mamy, pozostaje tylko kod JavaScript. Na początku importujemy plik JS:

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

…po czym dodajemy taki oto krótką linijkę JavaScriptu, zamkniętą w tagach script do naszej witryny:

AOS.init();

I to wszystko, nasza biblioteka zaczyna działać. Sprawdźmy teraz w jaki sposób jej używać! 🙂


Jak używać AOS?

Wszystko opiera się na prostym atrybucie HTML:

<div data-aos=“nazwa animacji”></div>

Na stronie autora można znaleźć wszystkie możliwe animacje oraz ich nazwy, które umieszczamy w cudzysłowie. Oczywiście cała funkcjonalność biblioteki nie kończy się na zadeklarowaniu nazwy animacji. Do użytku mamy jeszcze sporo atrybutów:

  • data-aos-once – w zależności od tego czy wpiszemy true lub false, to animacja będzie się odtwarzać podczas przewijania w górę, jednocześnie chowając element (wartość domyślna – true).
  • data-aos-offset – ustawia miejsce, w którym wykona się animacja. Im większą wartość wpiszemy w cudzysłowie, tym później się to stanie (wartość domyślna – 120).
  • data-aos-duration – długość animacji mierzona w milisekundach (wartość domyślna – 400).
  • data-aos-delay – opóźnienie zapisane w milisekundach (wartość domyślna – 0).
  • data-aos-easing – wybrana zostaje tzw. timing function w CSS, po to aby element został zaanimowany w innym tempie (wartość domyślna – ease).
  • data-aos-anchor – za pomocą tego parametru wybieramy element, który spowoduje zaanimowanie innej części strony, gdy offset znajdzie się na obiekcie wywołującym (wartość domyślna – null).
  • data-aos-anchor-placement – rozszerzenie do poprzedniego parametru. Za jego pomocą określamy miejsce na ekranie w, którym element ma się zaanimować. Dla przykładu wartość bottom-center oznacza, że animacja zajdzie gdy środek elementu (drugi człon wartości atrybutu odpowiada za miejsce na elemencie) znajdzie się na dole okna przeglądarki (pierwszy zarządza viewportem).

Tworzenie własnych animacji.

Poza ustalonym zbiorem efektów, do dyspozycji mamy prosty sposób, z którego pomocą możemy tworzyć nowe. Kod CSS takiej nowoutworzonej animacji może wyglądać w ten sposób:

[data-aos="rotate"] 
{
    transform: rotate(360deg);
    transition-property: transform;
}

[data-aos="rotate"].aos-animate 
{
    transform: rotate(0deg);
}

Natomiast w kodzie HTML po prostu umieszczamy znany nam atrybut data-aos, a jako jego wartość przyjmujemy “rotate” wpisane w cudzysłowie:

<div data-aos="rotate"></div>

Zmiana ustawień wszystkich animacji.

A co jeśli chcemy, żeby wszystkie animacje odtwarzały się na przykład sekundę, zamiast domyślnych 400 milisekund? Jest na to dużo prostszy sposób niż dodawanie do każdego elementu HTML nowego atrybutu! Wystarczy zajrzeć do naszej dodatkowej lini JavaScriptu:

AOS.init();

Dla omawianej już zmiany długości animacji będzie ona wyglądać w ten sposób:

AOS.init({ 
    duration: 1000, 
});

I tak ze wszystkim co jesteśmy w stanie określić za pomocą dodatkowych atrybutów omówionych na końcu podtytułu “Jak używać AOS?”.


Podsumowanie.

Tak oto dotrwaliśmy do końca. Mam nadzieję, że dzięki temu artykułowi poznałeś coś co pozwoli usprawnić Twoją pracę!

Czy stosujesz tego typu animacje na tworzonych przez siebie stronach? Jeśli tak to czego używasz w tym celu? Podziel się w komentarzu! 🙂

Programista zakochany w JavaScript’cie, twórca stron internetowych i jak widać od niedawna bloger 🙂

7 comments Add yours
  1. Używałem wow.js i AOS dopóki nie dowiedziałem się jak tragicznie strona jest widziana przez boty Google. W tym kontekście polecam się zastanowić czy ważniejsze są tanie animacje czy Seo 😉

    1. Bardzo cenna uwaga Martinie. Nigdy o tym nie słyszałem, a czy masz może jakieś materiały, w których jest o tym napisane? Z chęcią dowiedziałbym się czym jest to dokładnie spowodowane. 🙂

      1. Dokladnie jest to spowodowane tym jak dziala animate.css – ukrywa on elementy w ten sposob zeby podczas gdy sa w viewporcie mogly sie one animowac. Problem w tym ze ukrywane sa one dosc skutecznie bo zarowno dla Google jak i dla Screen Readerow (dostepnosc rowniez lezy). Nie znalazlem do tej pory zadnych artykulow, ale do sprawdzenia tego wystarczy Search Console + opcja fetch as Google.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *