le formule magiche

Le animazioni

PROMEMORIA GENERALI:
Per rendere continuo il ciclo di una animazione, aggiungo, o modifico questa regola affinchè sia impostata su "infinite":
-webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

Per ripetere l'animazione un numero di volte definito, indico tale numero al posto di "infinite".
In caso si utilizzino le "@keyframes" con regole di stile insite, è opportuno aggiungere il comando "forwards", affinchè, allo stop dell'animazione, l'ultimo fotogramma mantenga le regole contenute nella @keyframe relativa.

In mancanza di impostazioni specifiche, l'animazione sarà eseguita una sola volta.

Per impostare un ritardo nell'esecuzione, uso questa regola:
-webkit-animation-delay: 2s;
    animation-delay: 2s;

Le animazioni possono essere applicate ad un div, ma anche ad una immagine, o ad altro.

NOTA: le risorse sono accessibili solo ai membri

Non sei ancora membro? Guarda questa Breve anteprima video


Generatore di animazioni

Nota: Se aggiungete più animazioni nella stessa pagina, potete implementare le regole di stile comuni una sola volta.

Animazioni onmouseover

Animazioni che si attivano al passaggio del mouse.
Nota: su dispositivi touchscreen, le animazioni onmouseover possono risultare inattive o mal funzionanti.
Importante, in questo caso, che l'elemento a cui viene applicata l'animazione non contenga un collegamento (link)
.

Rassegna di animazioni onmouseover

Effetti zoom

I filtri (filter)


Animazioni automatiche

Titoli animati - rassegna

Testo che scorre - HTML, CSS

Sequenze di immagini con fade - HTML, CSS


Rotazioni(automatiche e onmouseover):

Rotazioni varie - HTML, CSS

Immagini che ruotano - HTML, CSS

Cartellino che dondola - HTML, CSS


Animazioni allo scroll

Le animazioni che abbiamo visto vengono attivate ad ogni caricamento della pagina e sono visibili se l'elemento si trova in primo piano.
Se applichiamo l'animazione ad un elemento che si trova nella parte della pagina sotto lo schermo, quella, cioè che si raggiunge con lo scroll, non otterremo alcun risultato visibile, perchè il browser esegue comunque l'animazione al caricamento della pagina, anche se l'elemento non è ancora, in realtà, visibile.
Per far sì che il browser esegua l'animazione allo scroll e non prima, dobbiamo ricorrere a javascript.
Ci sono diverse librerie per lo scopo, una di queste è wow.js.
È possibile includerla via CDN in questo modo:
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"
integrity="sha256-z6FznuNG1jo9PP3/jBjL6P3tvLMtSwiVAowZPOgo56U="
crossorigin="anonymous"></script>

Subito sotto, mettete questo script:
<script> new WOW().init(); </script>

Fatto ciò, non resta che aggiungere la classe wow ad ogni elemento animato che deve attivarsi allo scroll della pagina.

Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 

Modulo di contatto per i membri

Argomenti del sito correlati:

Le animazioni Close