Animácie - Dobrovoľné

Pokiaľ chceme našu webstránku oživiť pomocou animácií a rôznych efektov, môžeme na tento účel použiť CSS knižnicu Animate.css.

Úloha

Naviguj sa na stránku Animate.css
Stiahni css súbor animate.css
Ulož css súbor do priečinka css v priečinku htmlkurz2016
Pridaj animate.css do hlavičky <head></head> v súbore index.html <link rel="stylesheet" href="css/animate.css" type="text/css">
Stiahni si z nasledujúcej adresy súbor wow.min.js
Ulož súbor do priečinka js v priečinku htmlkurz2016
Vlož súbor wow.min.js do spodnej časti webu pod sekciu s javascriptami tesne pred </body> tag <script src="js/wow.min.js"></script>
Pridaj pod nasledujúci kód
```
<script>
new WOW().init();
</script>
```
Ulož súbor index.html

Animáciu ideme pridať na bloky .join1 a .join2.

Keď si pozrieš na stránke animate.css, sú uvedené všetky druhy animácií s možnosťou animáciu si vyskúsať. K triede .join1 pridajme animáciu pomocou triedy .fadeInRight. Tak isto k triede .join2 animáciu .fadeInLeft.

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 join1 fadeInLeft">
...
</div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 join2 fadeInRight">
...
</div>

Aby sa animácia zobrazila až pri zoskrolovaní na danú sekciu a nie hneď pri načítaní stránky pridaj zároveň do každej sekcie ešte triedu .wow.

<div id="join" class="container-fluid">
  <div class="row text-center">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 join1 wow fadeInLeft">
      <span class="join-info">Pod programovat s <br />
        <a href="#" target="_blank">PyLadies</a>
      </span>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 join2 wow fadeInRight">
      <span class="join-info">Pod programovat s <br />
        <a href="#" target="_blank">Czechitas</a>
      </span>
    </div>
  </div>
</div>

Ulož súbor index.html a pozri sa v prehliadači ako animácia vyzerá.

Ešte posledná vec. Nahratie kódu na Github.