animazioni con css e jquery

Scorrere una pagina è una delle azioni più frequenti che un web traveler svolge durante la sua permanenza sulla rete. Rendere piacevole questa comunissima azione deve essere assolutamente inserita nella tua lista di cose da fare quando realizzi un sito.

Sparsi per la rete ci sono numerosi esempi di scrolling che bypassano la versione classica e “laggosa” con qualcosa di più soft e piacevole. Nel tutorial di oggi voglio farti vedere quanto sia semplice implementare uno scrolling animato, dove gli elementi che costruiscono la pagina compaiono mano a mano che si scorre verso il basso.

Procuriamoci il necessario

Come prima cosa dobbiamo recuperare dall’Internet due risorse importantissime:

  • CSS Animate – una libreria CSS ricca di animazioni. L’implementazione è semplicissima basterà assegnare un paio di classi agli elementi desiderati e il gioco è fatto.
  • jQuery Viewport Checker – un elegante soluzione per controllare se gli elementi sono all’interno della finestra del browser o ancora nascosti, in un caso o nell’altro assegna ad ognuno di essi una classe.

Ora che hai tutto ciò che ti serve, devi richiamare le librerie all’interno della tua pagina web.

La struttura

Ora che le librerie sono state richiamate è giunto il momento di occuparsi del markup HTML.

Prendiamo come esempio lo stream dei post sul tuo blog, grossolanamente la struttura sarà come la seguente:

Una volta implementato il markup o, eventualmente, dopo aver individuato una classe comune nel vostro flusso di articoli è il turno del CSS.

Lo stile

Queste due classi verranno utilizzate in seguito dal Viewport Checker per nascondere o visualizzare a piacimento gli elementi.

Uniamo il tutto con Javascript

jQuery da il tocco finale che rende tutto più magico.

Prima di proseguire dovrai scegliere l’animazione CSS che desideri, in modo da assegnare la classe dinamicamente con jQuery. In questo tutorial io ho scelto l’animazione “FadeInUp”.

Lo script non ha niente di arcano o incomprensibile, ma lo spiego comunque.

Lo script lavora in due passaggi:

  1. Assegna la classe “nascosto” a tutti gli elementi “articolo” che non sono visibili all’interno del viewport (finestra del browser)
  2. Durante lo scrolling quando l’elemento con classe “nascosto” sarà esposto di 100px verranno aggiunte le classi “visibile”, “animated” e “fadeInUp” e l’animazione avrà inizio.

L’effetto che si viene a creare è davvero gradevole e senza ombra di dubbio non passerà inosservato.

Cosa ne dici? Carino no? Fammi sapere cosa ne pensi e se hai consigli per migliorare questo tutorial.