close
The Carina Nebula

Przeglądając różne strony (zwłaszcza te typu one-page) mogłeś natrafić na ciekawy efekt polegający na stopniowym pojawianiu się elementów podczas przewijania strony. W tym wpisie pokażę Ci jak można to zrobić w prosty sposób.

Nie będziemy tutaj od podstaw tworzyć nowej strony bo nie o to chodzi w tym poradniku. Jeśli chcesz to możesz skorzystać z jakiejś własnej witryny. Ja skorzystam ze stworzonej w tym wpisie strony pokazującej efekt parallax.

Możesz pobrać tą stronę klikając tutaj. 🙂

Do dodania animacji będziemy potrzebowali trzech rzeczy:

  • biblioteka jQuery – potrzebna do działania wtyczki
  • wtyczka viewportChecker – pozwala na wykonanie jakiejś akcji gdy dany element jest widoczny na ekranie
  • animate.css – zbiór animacji CSS

 

Aby pobrać wtyczkę viewportChecker wejdź na tą stronę i kliknij przycisk Download ZIP. Pobrane zostanie całe archiwum, z którego będziemy potrzebowali tylko jednego pliku. Znajduje się on w folderze dist i nosi nazwę jquery.viewportchecker.min.js.

Następnie przejdź na tą stronę i kliknij na napis Download Animate.css. Zostanie pobrany jeden plik – animate.css.

Zajmijmy się teraz podłączeniem tych plików. W sekcji head strony podepnijmy animate:

Następnie przed zamykającym znacznikiem </body> dodajmy pliki Javascript:

Najpierw podpinamy bibliotekę jQuery, a następnie pobraną wtyczkę. Poniżej dodajemy też znaczniki <script>, pomiędzy którymi aktywujemy wtyczkę.

 

Teraz do naszych stylów dodajmy dwie reguły:

Elementy z klasą .hide będą niewidoczne. Pojawią się dopiero po uzyskaniu klasy .show. Wykorzystamy to później.

Uwaga: Jeśli korzystasz z Bootstrapa to klasa .hide spowoduje konflikt. W tym wypadku zmień jej nazwę na dowolną inną.

Poniższy kod jest wycinkiem z pliku, który możesz pobrać na początku wpisu. Posłuży jako przykład.

Załóżmy, że chcemy dodać animację do nagłówka h1. Moglibyśmy to zrobić w ten sposób:

Powyższy kod, umieszczony między wcześniej stworzonymi znacznikami <script> sprawi, że wszystkie nagłówki h1 będą animowane. Nie jest to jednak dobry sposób, ponieważ wymaga umieszczania praktycznie identycznego kodu dla każdego elementu, który chcemy zanimować.

Aby nie powielać kodu JS możemy napisać to w ten sposób:

Przy pomocy tych kilku linijek możemy animować każdy element na stronie. Jak działa ten kod?

Na początku wybierane są wszystkie elementy z atrybutem data-animate. Następnie dodawana jest do nich klasa .hide (ukrywa elementy). Kolejno dla każdego takiego elementu wywoływana jest funkcja viewportChecker, która dodaje klasy:

  • .show – odsłaniająca element
  • .animate – mówiąca animate.css, że dany element jest animowany
  • klasa mówiąca o rodzaju animacji (wszystkie rodzaje możesz zobaczyć tutaj) – nazwa zostaje pobrana z data-animate

Usuwana zostaje klasa .hide offset (odległość od elementu potrzebna do aktywacji) zostaje ustawiony na 30%. 

Dodajmy teraz atrybuty data-animate do elementów w HTML:

Animacje zostały dodane do nagłówka h1 oraz całej sekcji poniżej.

Analogicznie możemy dodawać atrybut data-animate do dowolnych elementów. Warto zwrócić uwagę, że atrybut ten przyjmuje w wartości nazwę animacji (wszystkie nazwy dostępne są tutaj).

Przykład możesz zobaczyć tutaj.

Paczkę możesz pobrać klikając tutaj.

Dzięki 🙂

 

 

Tags : animatejqueryprzewijaniescrollviewportChecker
  • Badiusz

    Witaj, jak nazywa się efekt podczas przewijania strony, że tło zmienia się z jednego na drugie? Tak jakby tło było pod spodem? Z góry dzięki 🙂

  • Paweł

    Cześć, podpowie ktoś w której części kodu pogrzebać by animacje pojawiały się za każdym razem gdy przewiniemy? (a nie tylko raz).
    Artykuł bardzo przydatny, dzięki!

  • Rafał

    Cześć. Świetna instrukcja. Możesz mi pomóc w jednej sprawie?
    Korzystam z kodu:
    $(document).ready(function(){
    $(‚h1’).addClass(‚hide’).each(function(){
    $(this).viewportChecker({
    classToAdd: ‚show animated fadeInDown’,
    classToRemove: ‚hide’,
    offset: ‚30%’
    });
    });
    });

    Bo spełnia on moje wymagania. Jednak chciałbym, aby animacje nie były wczytywane raz, tylko za każdym razem jak element zniknie z ekranu to po ponownym pojawieniu się (scrollowanie w dół i w górę) znów się animował. Możesz mi pomóc? Podejrzewam, że mała modyfikacja tego kodu, jednak nie jestem biegły w JS.

  • Rafał

    Cześć. Świetny tutorial. Możesz mi pomóc w jednej sprawie?
    Korzystam z kodu:
    $(document).ready(function(){
    $(‚h1’).addClass(‚hide’).each(function(){
    $(this).viewportChecker({
    classToAdd: ‚show animated fadeInDown’,
    classToRemove: ‚hide’,
    offset: ‚30%’
    });
    });
    });

    Bo spełnia on moje wymagania. Jednak chciałbym, aby animacje nie były wczytywane raz, tylko za każdym razem jak element zniknie z ekranu to po ponownym pojawieniu się (scrollowanie w dół i w górę) znów się animował. Możesz mi pomóc? Podejrzewam, że mała modyfikacja tego kodu, jednak nie jestem biegły w JS.

  • Łukasz

    Mam ten sam problem co koleżanka Kinga. Po dodaniu skryptów wszystko się animuje, jednak wszystkie animacje wykonywane są w tym samy czasie a nie jedna po drugiej jak w Twoim przykładzie ze stroną typu parallax. Domyślam się, że ma tu znaczenie wielkość parametru offset, jednak wpływa on tylko na opóźnienie włączenia wszystkich animacji a nie na „włączanie ich po kolei”.
    Można coś na to poradzić?

  • Kinga

    Dzięki za ciekawy tutorial. Ja mam także problem. Zrobiłam wszystko zgodnie z opisem, łącznie w dodaniem właściwego pliku. Efekt jest taki, że jak ustawiam offset: ‚30%’ i element data-animate do wielu elementów na stronie, to niezależnie gdzie one się znajdują, efekt pojawianie się, występuje na każdym z nich od razu po załadowaniu strony. Natomiast zmiana chociażby na 40% nie pokazuje efektu w ogóle na żadnym elemencie (w ogóle ich nie widać na stronie podczas przewijania) 🙁 Również mam menu przyklejone do górnej części strony i nie wiem, czy to nie jest może powód.

    • Bartłomiej Mąkina

      Cześć 🙂

      Masz możliwość podesłania linka do strony? Mógłbym to sprawdzić. Jeśli nie masz jej nigdzie wrzuconej to podeślij pliki na kontakt@devcorner.pl 🙂

  • Tomek

    Zrobiłem wszystko po kolei i działa :), przejże sobie resztę :P. A w tym temacie szkoda że nie wspomniałeś o czasu wykonywania animacji, czy w tym konkretnym przykładzie dało by rade to zmienić.

  • Robert Saternus

    Wielkie brawa za poruszanie tematów o parallax-ie. Jest to świetne zwiększenie atrakcyjności strony.

    Szkoda jednak, że nie pokazujesz, jak taki efekt uzyskać w czystym jQ. Sprawa jest naprawdę prosta w tym przypadku a nie trzeba podpinać dodatkowego kodu wtyczki oraz zaśmiecać html-a dodatkowymi klasami.

    Pozdrawiam

  • JogiMichu

    No dobra…Może nie wszystko zrobiłem tak jak napisałeś…Bo jest różnica pomiędzy plikiem jquery.viewportchecker.min.js z folderu dist a plikiem jquery.viewportchecker.js z folderu src…. Ten post jest dla tych, którzy popełnią podobny błąd co ja 😉

    • Każdy może przeoczyć. Jeśli coś nie działa ze skryptami JS to warto wejść w Chrome w „Zbadaj element” (PPM w dowolnym miejscu na stronie) a następnie zakładka „Console”. Jeśli nie udało się załadować jakiegoś pliku to wyświetli się błąd „Failed to load resource”. Wtedy możesz przypuszczać, że prawdopodobnie coś pomyliłeś w nazwie. Pozdrawiam 🙂

  • JogiMichu

    Witam! Zrobiłem wszystko zgodnie z instrukcją. Efekt jest taki, że elementy z klasą data-animate=”cos tam” są stale ukryte…na stronie posiadam również skrypcik przyklejający menu do górnej krawędzi okna. Czy spotkał się ktoś z tym, żeby te dwa skrypty się gryzły? Może ktoś ma jakiś pomysł jak rozwiązać tego typu problem?
    Pozdrawiam.
    PS. Twój blog trafia do ulubionych;)