Gekos
10/4/2019 - 12:51 PM

wow.js + animate.css Animazione allo scroll

Con wow.js e animate.css posso avere delle animazioni allo scroll della pagina, quaesto mi permette di far animare degli elementi allo scroll del mouse, in modo da farli comparire in modo animato. Di seguito riporto un codice per animare degli elementi allo scroll. Per vedere i tipi di animazione possibili e preimpostati, vai su https://daneden.github.io/animate.css/ Nell'esempio ci sono 3 "div class=col", all'interno di ognuono ci sono 2 classi, la prima è "wow" ed è uguale per tutti e tre i div, la seconda è "bounceInLeft" per il primo e il terzo div mentre per il secondo è "bounceInRight". Con la classe wow, indichiamo quali elementi devono essere animati, con la classe "bounceInLeft" e "bounceInRight" gli indichiamo il tipo di animazione.

Html
content_copyfile_download
<html>
  <head>
    <!-- Importo il file css di animate -->
    <link rel="stylesheet" href="animate.css" type="text/css" media="all">
  </head>
<body>
<div class="container my-5">
    <div class="row">
        <div class="col text-center wow bounceInLeft">
            <a href="#">
                <img class="csm-icon-img mb-3" src="img" alt="Alt immagine">
                <h2>Titolo</h2>
                <p class="sub-title">Sotto titolo</p>
            </a>
        </div>

        <div class="col text-center wow bounceInRight">
            <a href="#">
                <img class="csm-icon-img mb-3" src="img" alt="Alt immagine">
                <h2>Titolo</h2>
                <p class="sub-title">Sotto titolo</p>
            </a>
        </div>

        <div class="col text-center wow bounceInLeft">
            <a href="#">
                <img class="csm-icon-img mb-3" src="img" alt="Alt immagine">
                <h2>Titolo</h2>
                <p class="sub-title">Sotto titolo</p>
            </a>
        </div>
    </div>
</div>

<!-- Questo script va alla fine della pagina e abilita wow.js -->
<!-- Importo il file js di wow -->
<script type="text/javascript" src="wow.min.js"></script>
<!-- Inizializzo wow.js -->
<script>
    var wow = new WOW({
        offset:100,        // distance to the element when triggering the animation (default is 0)
        mobile:false       // trigger animations on mobile devices (default is true)
    });
    wow.init();
</script>
</body>
</html>