Pojawianie się elementów strony podczas przewijania

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:

<link rel="stylesheet" href="animate.css" type="text/css">

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

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.viewportchecker.min.js"></script>

<script>
	$(document).ready(function(){

	});
</script>

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:

.hide{
	opacity:0
}

.show {
	opacity: 1;
}

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.

<section class="module parallax parallax-1">
  <div class="container">
    <h1>Sekcja 1</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis scelerisque ultricies. Phasellus imperdiet lorem eget sem egestas, non viverra metus posuere. Curabitur velit metus, fermentum sit amet aliquet ullamcorper, faucibus et diam. Aliquam et quam id massa imperdiet rutrum at et ante. Ut eleifend, lectus a placerat feugiat, lectus urna ultrices libero, a sollicitudin enim ipsum eu sapien. Curabitur ac tortor vel neque pellentesque egestas lacinia ac arcu. Nulla a egestas tortor. Fusce euismod ante nibh, non mattis urna semper non. Nunc molestie dignissim nunc, et condimentum ligula interdum nec. Nullam feugiat sed libero at tincidunt. Pellentesque quis felis eget dui semper posuere. Nulla finibus purus eu placerat finibus. Fusce nec velit at justo vestibulum varius. Donec vehicula malesuada tellus vitae viverra.</p>
  </div>
</section>

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

$(document).ready(function(){

		$('h1').addClass('hide').each(function(){
      $(this).viewportChecker({
        classToAdd: 'show animated fadeInDown',
        classToRemove: 'hide',
        offset: '30%'
      });
    });

	});

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:

$(document).ready(function(){

		$('*[data-animate]').addClass('hide').each(function(){
      $(this).viewportChecker({
        classToAdd: 'show animated ' + $(this).data('animate'),
        classToRemove: 'hide',
        offset: '30%'
      });
    });

	});

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:

<section class="module parallax parallax-1">
  <div class="container">
    <h1 data-animate="bounceInUp">Sekcja 1</h1>
  </div>
</section>

<section class="module content" data-animate="fadeIn">
  <div class="container">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis scelerisque ultricies. Phasellus imperdiet lorem eget sem egestas, non viverra metus posuere. Curabitur velit metus, fermentum sit amet aliquet ullamcorper, faucibus et diam. Aliquam et quam id massa imperdiet rutrum at et ante. Ut eleifend, lectus a placerat feugiat, lectus urna ultrices libero, a sollicitudin enim ipsum eu sapien. Curabitur ac tortor vel neque pellentesque egestas lacinia ac arcu. Nulla a egestas tortor. Fusce euismod ante nibh, non mattis urna semper non. Nunc molestie dignissim nunc, et condimentum ligula interdum nec. Nullam feugiat sed libero at tincidunt. Pellentesque quis felis eget dui semper posuere. Nulla finibus purus eu placerat finibus. Fusce nec velit at justo vestibulum varius. Donec vehicula malesuada tellus vitae viverra.</p>
  </div>
</section>

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.

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

Tworzenie gry przeglądarkowej – #9 Walka Jak stworzyć własny plugin jQuery Jak zrobić karuzelę z owlCarousel
View Comments
  • Witam !
    Bardzo fajny skrypt… wszystko działa bardzo fajnie ale nie wiem co mam zrobić aby wywołać animację za każdym razem kiedy pojawi się na monitorze – nie tylko raz. Czy jest jakiś prosty sposób? Z góry dziękuję za podpowiedź 🙂

  • 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 🙂

  • 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!

  • 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.

  • 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.

  • 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ć?

  • 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.

  • 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ć.

  • 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

  • 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 🙂

  • 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;)