Come realizzare animazioni coi CSS3 su una pagina web.

Oggi vediamo come posiamo applicare varie tipi d'animazione alle nostre immagini tramite un pacchetto di effetti gia pronti. L'idea è quella di visualizzare le immagini in una griglia. Opportunità per realizzare questo sono molte. Alcuni degli effetti d'animazione sono arrivate da CSS3 scroll effects, scritto da Hakim El Hattab.

Per la distribuzione di immagini in una griglia, si utilizza  la Masonry libreria. Se non si desidera utilizzare la libreria è possibile rimuovere l'inizializzazione dello script e di lavorare solo con selettori CSS (cosa sono poi scoprire nel corso CSS). Non è molto difficile.

Così, ognuna delle nostre immagini sara elemento di una lista non ordinata:

 Marcup html.

<ul class="grid effect-4" id="grid">
    <li><a href="/ioeweb.it/fWMM"><img src="/images/1.jpg"></a></li>
    <li><a href="/ioeweb.it/fWPV"><img src="/images/2.jpg"></a></li>
    <li><a href="/ioeweb.it/fWMT"><img src="/images/3.jpg"></a></li>
    <li><a href="/ioeweb.it/fQdt"><img src="/images/4.png"></a></li>
    <!-- ... -->
</ul>

L'idea è quella di aggiungere una classe specifica ad immagine quando essa si trova nell'area di visualizzazione. Ad elementi, che dovrano solo apparire asegniamo una classe animate. Coi CSS aplichimo animazioni agli elementi e creiamo effeti:

/* Effect 4: fall perspective */
.grid.effect-4 {
    perspective: 1300px;
}
.grid.effect-4 li {
    transform-style: preserve-3d;
}
.grid.effect-4 li.animate {
    transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    animation: fallPerspective .8s ease-in-out forwards;
}
@keyframes fallPerspective {
    100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

Abbiamo anche un sacco di impostazioni da gestire. Per aggiungere più certezza, potete impostare il tempo minimo e massimo di nuovi elementi. Tutti gli elementi che appaiono sulla pagina vverano animati a seconda di questi valori. Per esempio, se metiamo il valore 0, l'effetto sarà immediato. Se 1, rispettivamente, con un secondo in ritardo.

new AnimOnScroll( document.getElementById( 'grid' ), {
        minDuration : 0.4,
        maxDuration : 0.7,
        viewportFactor : 0.2
    } );


Fonte  della lezione: http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

Letto 243 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso