Perchè c’era bisogno di un’alternativa a WOW.js?
Spiego prima brevemente l’utilizzo di WOW, ovvero una libreria jQuery che permette grazie alla combinazione di animate.css di avere delle animazioni sugli elementi di un sito.
il suo utilizzo è davvero banale, si carica la libreria jQuery e poi il file wow.js poi occorre inizializzare le chiamate inserendo
new WOW().init();
successivamente ad ogni elemento che si vuole animare, occorre aggiungere 2 classi la prima che identifica l’elemento wow e successivamente il tipo di animazione da utilizzare (ad esempio fadeInUp)
<div class="wow fadeInUp">
Contentenuto da animare
</div>
con eventuali opzioni quali il delay dell’animazione
<div class="wow fadeInUp" data-wow-delay="2s">
Contentenuto da animare
</div>
la ricerca di un’alternativa valida è data dal fatto di cercare qualcosa di GRATUITO e leggero per questa gestione.
Che alternativa posso utilizzare?
In questi giorni ho rispolverato una libreria che avevo trovato in rete ovvero hunt.js che pesa meno di 1k (per l’esattezza, 613 bytes)e gestisce proprio la verifica di un elemento se è dentro o fuori la viewport.
lo script nella documentazione offre questo esempio:
hunt(document.getElementsByClassName('element'), {
in: function() {
this.classList.add('visible');
},
out: function() {
this.classList.remove('visible');
}
});
che ho deciso di modificare leggermente, per gestirne le animazioni in stile WOW in 2 modi differenti
tramite javascript puro
// Gestisce le animazioni
function start_animations(){
var myElements = document.querySelectorAll(".c82d");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.visibility='hidden';
myElements[i].style.WebkitAnimationName='none';
myElements[i].style.animationName='none';
}
hunt(myElements, {
in: function() {
var element = this;
var delay = element.dataset['delay'] ? element.dataset['delay'] : 0;
var newclass = element.dataset['animation'] ? element.dataset['animation'] : 'fadeIn';
setTimeout( function(){
element.classList.add("animated");
element.classList.add(newclass);
element.style.visibility = 'visible';
element.style.WebkitAnimationName = newclass;
element.style.animationName = newclass;
},
delay);
}
});
}
// Registra il listener del caricamento della pagina per richiamare la funzione precedente
if(window.addEventListener){
window.addEventListener('load',start_animations,false);
}
else{
window.attachEvent('onload',start_animations);
}
o tramite jQuery
jQuery(document).ready(function($){
var myElements = $('.c82d');
if ( myElements ) {
$.each(myElements, function(index, el){
$(el).css({'visibility':'hidden', 'WebkitAnimationName':'none', 'animationName':'none'});
})
}
hunt(myElements, {
in: function() {
var element = this;
var delay = $(element).attr('data-delay') ? $(element).attr('data-delay') : 0;
var newclass = $(element).attr('data-animation') ? $(element).attr('data-animation') : 'fadeIn';
setTimeout( function(){
$(element)
.addClass('animated ' + newclass)
.css({'visibility':'visible', 'WebkitAnimationName':newclass, 'animationName':newclass});
},
delay);
}
});
});
e il suo impiego sarà semplicemente
Contenuto da animare
dove inserirò la mia classe (per identificare gli elementi) e aggiungerò successivamente l'attributo data-animation ed eventuale data-delay, per gestire rispettivamente il tipo di animazione e il ritardo dell'esecuzione.
voi avete altre alternative valide?