Effetti allo scroll con animate CSS

Il primo post del 2016 ci si aspetta sempre sia qualcosa di eclatante e siccome ogni anno che passa la cosa diventa sempre più impegnativa oggi invece di parlarvi di qualcosa vi insegno a fare qualcosa.

Il web odierno è pieno di grandi e piccole animazioni, a volte cose esagerate, ma molto spesso piccoli dettagli in movimento che appaiono allo scroll della pagina; avrete notato da soli come nella maggior parte dei temi pro per esempio vengano applicate queste tecniche per attirare l’attenzione dell’utente finale. Ci sono diversi modi per fare questo, la libreria probabilmente più nota è WOW di cui vi parlerò prossimamente, mentre, molto più semplice da gestire, è il file viewportchecker.js creato da Dirk Groenen che ci permette di avere a disposizione 3 strumenti per la nostra effettistica a comparsa/scomparsa:

• Il file animate.css con le istruzioni CSS3 per l’animazione
• Il file viewportchecker.js per l’aggiunta delle classi
• Il file jQuery.min.js per far funzionare il tutto
• Consigliato per la libreria è ovviamente scaricare l’ultima release di jQuery dal sito ufficiale o utilizzare i CDN di Google mentre possiamo trovare il file animate.css cliccando qui e il file viewportchecker.js cliccando qui.

Copiamo i file nelle cartelle apposite del nostro sito e andiamo a effettuare i dovuti collegamenti nella head delle pagine dove vogliamo ci sia l’animazione mentre nel foglio di stile predisponiamo le classi hidden e visible che si occupano di non mostrare il contenuto prima dell’effetto dove la prima avrà come valore opacity:0 mentre la seconda opacity:1.

.hidden { 
  opacity: 0; 
}

.visible { 
  opacity: 1; 
}

Il codice Javascript da inserire che troviamo nel demo ci permette di applicare a un elemento con una classe da noi dichiarata uno degli effetti possibili presenti nel file animate.css; possiamo per esempio applicare a una classe che chiameremo fade l’effetto fadeInUp in questo modo:

jQuery('.fade') .addClass("hidden") .viewportChecker({ 
  classToAdd: 'visible animated fadeInUp', 
  offset: 100 
});

Non ci rimane quindi che aggiungere all’elemento HTML, sia questo un div, un p, un img o altro la classe fade e il gioco è fatto; allo scroll della pagina, a meno che non sia già presente nella parte visibile al caricamento della stessa, l’elemento apparirà con un effetto di dissolvenza in entrata a salire.

Tra i vari effetti possibili nel demo troviamo:

• bounce
• flash
• pulse
• bounceIn
• bounceInDown o Up
• bounceInLeft o Right
• fadeIn
• fadeInDown o Up
• fadeInLeft o Right
• bounceOut
• fadeOut
• flip
• rotateIn
• rotateOut
• e molti altri.

Mi raccomando, non abusatene, un effetto può essere molto carino da vedere la prima volta ma già alla seconda può diventare noioso. Come sempre il buongusto è a discrezione del designer. Tempo permettendo nei prossimi giorni implementerò questa news con un tutorial.