Biblioteka ScrollReveal.js

> Dodaj do ulubionych

1. Wprowadzenie

ScrollReveal to biblioteka JavaScript do 艂atwego implementowania animacji przewijania stron internetowych.

1.1. Instalacja biblioteki ScrollReveal

Najprostszym sposobem jest wklejenie tego elementu HTML zaraz przed zamykaj膮cym znacznikiem </body>.

<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>

Inne sposoby to:

1.2. Podstawy

Podstawowym API jest metoda reveal(), za pomoc膮 kt贸rej mo偶na z 艂atwo艣ci膮 tworzy膰 i konfigurowa膰 r贸偶ne rodzaje animacji.

<!-- HTML -->
<div class="foo"> Foo </div>
<div class="bar"> Bar </div>
// JavaScript
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');

1.3. 艁膮czenie wywo艂a艅 metod

Konstruktor ScrollReveal i g艂贸wne metody mo偶na 艂膮czy膰 w 艂a艅cuchy wywo艂a艅.

window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');

// powy偶sze jest to偶same z tym
window.sr = ScrollReveal().reveal('.foo, .bar');

2. Konfiguracja

Przekazuj膮c do konstruktora ScrollReveal() obiekt konfiguracyjny, mo偶na zmieni膰 ustawienia domy艣lne wszystkich animacji, natomiast przekazuj膮c obiekt konfiguracyjny do metody reveal() mo偶na zdefiniowa膰 dodatkowe ustawienia.

2.1. Praktyczny przyk艂ad

// zmiana ustawie艅 domy艣lnych
window.sr = ScrollReveal({ reset: true });

// dostosowywanie ustawie艅
sr.reveal('.foo', { duration: 200 });

2.2. Pocz膮tkowe ustawienia domy艣lne

// 'bottom', 'left', 'top', 'right'
origin: 'bottom',

// mo偶e by膰 dowolna jednostka d艂ugo艣ci CSS, np. '5rem', '10%', '20vw' itd.
distance: '20px',

// czas w milisekundach
duration: 500,
delay: 0,

// pocz膮tkowe k膮ty w stopniach; nast膮pi przej艣cie od tych warto艣ci do 0 na wszystkich osiach
rotate: { x: 0, y: 0, z: 0 },

// pocz膮tkowa warto艣膰 przezroczysto艣ci, stosowana przed przej艣ciem do obliczonej przezroczysto艣ci
opacity: 0,

// pocz膮tkowa warto艣膰 skalowania; nast膮pi przej艣cie od tej warto艣ci do 1
scale: 0.9,

// przyjmuje dowoln膮 funkcj臋 przebiegu animacji CSS, np. ease, ease-in-out, linear itd.
easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',

// domy艣lnym kontenerem jest element html. Mo偶na przekaza膰:
// w臋ze艂 DOM, np.: document.querySelector('.fooContainer')
// selektor, np.: '.fooContainer'
container: window.document.documentElement,

// do wyboru s膮 warto艣ci true i false, w艂膮czaj膮ce i wy艂膮czaj膮ce animacje w urz膮dzeniach mobilnych
mobile: true,

// true:  animacja jest w艂膮czana za ka偶dym razem, gdy elementy staj膮 si臋 widoczne
// false: animacja jest w艂膮czana tylko przy pierwszym wy艣wietleniu element贸w
reset: false,

// 'always' 鈥 op贸藕nienie wszystkich animacji
// 'once'   鈥 op贸藕nienie tylko pierwszej animacji
// 'onload' - op贸藕nienie tylko tych animacji, kt贸re s膮 w艂膮czane przy pierwszym 艂adowaniu
useDelay: 'always',

// pozwala okre艣li膰, kiedy element ma zosta膰 uznany za obecny w polu widoku Domy艣lna warto艣膰
// 0.20 oznacza, 偶e animacja zostanie w艂膮czona, gdy na stronie pojawi si臋 20% elementu
viewFactor: 0.2,

// warto艣ci pikselowe okre艣laj膮ce granice kontenera
// np.: ustaw `{ top: 48 }`, je艣li masz sta艂y pasek narz臋dzi o wysoko艣ci 48 pikseli
// --
// Wskaz贸wka wizualna: https://scrollrevealjs.org/assets/viewoffset.png
viewOffset: { top: 0, right: 0, bottom: 0, left: 0 },

// Metody zwrotne wywo艂ywane przed ka偶d膮 animacj膮 elementu i resetem
beforeReveal: function (domEl) {},
beforeReset: function (domEl) {},

// Metody zwrotne wywo艂ywane po ka偶dej animacji elementu i resecie
afterReveal: function (domEl) {},
afterReset: function (domEl) {}

3. Przyk艂ady zaawansowane

3.1. Animacje sekwencyjne

Do metody reveal() mo偶na przekaza膰 odst臋p czasowy (w milisekundach), aby utworzy膰 animacj臋 sekwencyjn膮.

// przekazanie odst臋pu czasowego do metody reveal()
window.sr = ScrollReveal({ duration: 2000 });
sr.reveal('.box', 50);

// lub...

// przekazanie odst臋pu czasowego i obiektu konfiguracji do metody reveal()
window.sr = ScrollReveal();
sr.reveal('.box', { duration: 2000 }, 50);

3.2. Zmienianie konfiguracji

Metoda reveal() obs艂uguje wywo艂ania na tym samym elemencie, dzi臋ki czemu programista 艂atwo mo偶e zmieni膰 jego konfiguracj臋.

<div class="foo"> Foo </div>
<div class="foo" id="chocolate"> Chip </div>
var fooReveal = {
  delay    : 200,
  distance : '90px',
  easing   : 'ease-in-out',
  rotate   : { z: 10 },
  scale    : 1.1
};

window.sr = ScrollReveal();
sr.reveal('.foo', fooReveal);
sr.reveal('#chocolate', { delay: 500, scale: 0.9 });

3.3. Praca z w臋z艂ami DOM

W pracy z metod膮 reveal() nie trzeba ogranicza膰 si臋 do u偶ywania samych selektor贸w. Metoda ta jako pierwszy argument przyjmuje te偶 w臋z艂y i listy w臋z艂贸w.

sr.reveal(document.getElementById('foo'));
sr.reveal(document.querySelectorAll('.bar'));

3.4. W艂asne i dodatkowe kontenery

Domy艣lnym kontenerem jest obszar widoku, ale do ka偶dego zestawu animacji mo偶na przypisa膰 dowolny inny kontener.

<div id="fooContainer">
  <div class="foo"> Foo 1 </div>
  <div class="foo"> Foo 2 </div>
  <div class="foo"> Foo 3 </div>
</div>

<div id="barContainer">
  <div class="bar"> Bar 1 </div>
  <div class="bar"> Bar 2 </div>
  <div class="bar"> Bar 3 </div>
</div>
window.sr = ScrollReveal();

// jako w臋ze艂 DOM...
var fooContainer = document.getElementById('fooContainer');
sr.reveal('.foo', { container: fooContainer });

// jako selektor...
sr.reveal('.bar', { container: '#barContainer' });

3.5. Tre艣膰 asynchroniczna

Metoda sync() stosuje animacje do asynchronicznie 艂adowanej tre艣ci.

Przyk艂ad:

<!-- index.html -->
<div id="fooContainer">
  <div class="foo">foo</div>
  <div class="foo">foo</div>
  <div class="foo">foo</div>
</div>

<!-- ajax.html -->
<div class="foo">foo async</div>
<div class="foo">foo async</div>
<div class="foo">foo async</div>
var fooContainer, content, sr, xmlhttp;

fooContainer = document.getElementById('fooContainer');

sr = ScrollReveal();
sr.reveal('.foo', { container: fooContainer });

// utworzenie nowego 偶膮dania asynchronicznego...
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == XMLHttpRequest.DONE) {
    if (xmlhttp.status == 200) {

      // zamiana odpowiedzi na HTML...
      var content = document.createElement('div');
      content.innerHTML = xmlhttp.responseText;
      content = content.childNodes;

      // dodanie ka偶dego elementu do DOM...
      for (var i = 0; i < content.length; i++) {
        fooContainer.appendChild(content[ i ]);
      };

      // W ko艅cu!
      sr.sync();
    }
  }
}

xmlhttp.open('GET', 'ajax.html', true);
xmlhttp.send();

4. Porady

4.1. Kolejno艣膰 ma znaczenie

Wywo艂ania metody reveal() powinny by膰 wykonywane jak najbli偶ej ko艅ca strony, aby:

  • elementy strony zd膮偶y艂y si臋 za艂adowa膰,
  • wszystkie inne biblioteki zd膮偶y艂y wykona膰 swoje zadania,
  • inne style zdefiniowane dla element贸w nie zosta艂y przes艂oni臋te.

Przyk艂ad:

<!DOCTYPE html>
<html>
  <head>
    <!-- najpierw 艂adujemy i tworzymy egzemplarz ScrollReveal -->
    <script src="js/scrollreveal.min.js"></script>
    <script>
      window.sr = ScrollReveal();
    </script>
  </head>
  <body>

    <div class="fooContainer">
      <div class="fooReveal"> Foo </div>
      <div class="fooReveal"> Foo </div>
      <div class="fooReveal"> Foo </div>
    </div>
<!-- wywo艂ania metody reveal() wykonujemy na ko艅cu -->
    <script>
      sr.reveal('.fooReveal', { container: '.fooContainer' });
    </script>

  </body>
</html>

4.2. Udogodnienia dla u偶ytkownika

W wi臋kszo艣ci przypadk贸w elementy pocz膮tkowo maj膮 ustawienie opacity: 0, dzi臋ki czemu mog膮 si臋 powoli pojawia膰. Poniewa偶 jednak JavaScript 艂aduje si臋 po rozpocz臋ciu renderowania strony, elementy te mog膮 na chwil臋 si臋 pokaza膰, zanim zostan膮 ukryte przez skrypt ScrollReveal.

Najlepszym rozwi膮zaniem tego problemu jest ukrycie animowanych element贸w za pomoc膮 odpowiednich ustawie艅 w sekcji head strony, aby pozostawa艂y ukryte podczas 艂adowania skrypt贸w JavaScript.

Kontynuacja przyk艂adu z sekcji 4.1.

<!DOCTYPE html>
<html>
  <head>
    <!-- najpierw 艂adujemy i tworzymy egzemplarz ScrollReveal -->
    <script src="js/scrollreveal.min.js"></script>
    <script>
      window.sr = ScrollReveal();

      // dodanie klasy do elementu html, je艣li obs艂ugiwana jest biblioteka ScrollReveal
      if (sr.isSupported()) {
        document.documentElement.classList.add('sr');
      }

    </script>

    <style>

      /* ukrycie element贸w do czasu uruchomienia biblioteki ScrollReveal */
      .sr .fooReveal { visibility: hidden; }

    </style>

  </head>
  <body>

    <div class="fooContainer">
      <div class="fooReveal"> Foo </div>
      <div class="fooReveal"> Foo </div>
      <div class="fooReveal"> Foo </div>
    </div>

    <!-- wywo艂ania metody reveal() wykonujemy na ko艅cu -->
    <script>
      sr.reveal('.fooReveal', { container: '.fooContainer' });
    </script>

  </body>
</html>

4.3. Dodawanie perspektywy do rotacji tr贸jwymiarowej

Biblioteka ScrollReveal obs艂uguje rotacj臋 tr贸jwymiarow膮, ale czasami dla podkre艣lenia efektu dobrze jest zdefiniowa膰 w艂asno艣膰 perspektywy kontenera.

Kontynuacja przyk艂adu z sekcji 4.2.

<!DOCTYPE html>
<html>
  <head>
    <!-- najpierw 艂adujemy i tworzymy egzemplarz ScrollReveal -->
    <script src="js/scrollreveal.min.js"></script>
    <script>
      window.sr = ScrollReveal();

      // dodanie klasy do elementu html, je艣li obs艂ugiwana jest biblioteka ScrollReveal
      if (sr.isSupported()) {
        document.documentElement.classList.add('sr');
      }

    </script>

    <style>

      /* ukrycie element贸w do czasu uruchomienia biblioteki ScrollReveal */
      .sr .fooReveal { visibility: hidden; }

      /* dodanie perspektywy do kontenera */
      .fooContainer { perspective: 800px; }

    </style>

  </head>
  <body>

    <div class="fooContainer">
      <div class="fooReveal"> Foo </div>
      <div class="fooReveal"> Foo </div>
      <div class="fooReveal"> Foo </div>
    </div>

  <!-- wywo艂ania metody reveal() wykonujemy na ko艅cu -->
    <script>
      // zastosowanie rotacji
      sr.reveal('.fooReveal', { container: '.fooContainer', rotate: {x: 65} });
    </script>

  </body>
</html>

5. Informacje ko艅cowe

Kod otwarty na licencji MIT. 漏2014鈥2016 Julian Lloyd.

5.1. Zgodno艣膰 z przegl膮darkami

Biblioteka ScrollReveal dzia艂a w ka偶dej przegl膮darce obs艂uguj膮cej JavaScript oraz transformacje i przej艣cia CSS. Do grupy tej zalicza si臋 Internet Explorer 10+ i wi臋kszo艣膰 nowoczesnych przegl膮darek dla komputer贸w stacjonarnych i przeno艣nych.

5.2. Podzi臋kowania

Inspiracj膮 do napisania biblioteki ScrollReveal by艂 dla mnie skrypt cbpScroller.js Manoeli Ilic.

Autor: Julian Lloyd

殴r贸d艂o: https://github.com/jlmakes/scrollreveal.js

T艂umaczenie: 艁ukasz Piwko

Tre艣膰 tej strony jest dost臋pna na zasadach licencji MIT