Biblioteka wow.js

Biblioteka wow.js dla stron typu scroll site

 

 

Biblioteka wprowadzająca animację podczas przewijania strony w dół . Współpracuje ze stylami Animate.css.
Istnieje opcja ustawienia animacji: styl, opóźnienie, długość, offset, iteracji ...

Opcje dodatkowe

data-wow-duration: Zmień czas trwania animacji,
data-wow-delay: Opóźnienie przed rozpoczęciem animacji,
data-wow-offset: Odległość od dołu okna przeglądarki, gdzie zostaje uruchomiona animacja,
data-wow-iteration:  Ilość powtórzeń animacji. np. 3 lub infinite (nieskończoność)

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">
</section>

Ustawienia własne

boxClass: Nazwa klasy, która ujawnia ukryte pola i animuje je w momencie przewijania strony w dół.

animateClass: Nazwa klasy, która wyzwala animacje CSS ("animated" domyślnie dla biblioteki animate.css)

offset: Odległość od dołu okna przeglądarki, gdzie zostaje uruchomiona animacja,

 wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       0,          // default
      mobile:       true,       // default
      live:         true        // default
    }
  )
  wow.init();

Prawidłowe dołączenie biblioteki wow.js do szablonu w CMS WordPress

W katalogu z szablonem (katalog themes/nasz_szablon/) tworzymy podkatalog /js lub w istniejącym umieszczamy plik wow.min.js i wow-arg.js

odnajdujemy plik functions.php i dodajemy kawałek kodu.

function rb_my_scripts() {
wp_enqueue_style( 'style-animate', get_template_directory_uri() . '/css/animate.css' );
	wp_enqueue_script('rb_wow', get_template_directory_uri() . '/js/wow.min.js', array(), '2.13', TRUE);
	wp_enqueue_script('rb_wow_arg', get_template_directory_uri() . '/js/wow-arg.js', array('rb_wow'), '2.14', TRUE);
	
}

add_action( 'wp_enqueue_scripts', 'rb_my_scripts' );

 

źródło:
http://mynameismatthieu.com/WOW/index.html

przykłady:

http://www.streamlineicons.com/
https://www.box.com/notes/
http://www.awwwards.com/websites/scroll/