le formule magiche

Animations

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 scaricabili solo dai membri

Animations generator

Generatore di animazioni:

Anteprima

Anteprima + codici (member only)

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

Onmouseover animations

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)
.

Onmouseover animations gallery

Galleria di immagini con animazione al passaggio del mouse

Anteprima

Anteprima + codici (member only)

Zoom effects

Effetto zoom

Anteprima

Anteprima + codici (member only)

Filter effects

Effetto filtro

Anteprima

Anteprima + codici (member only)

Change image onmouseover

Cambio di immagine al passaggio del mouse

Anteprima

Anteprima + codice (member only)


Automatic animations

Animated titles

Titoli animati

Anteprima

Anteprima + codici (member only)

Scrolling text - HTML, CSS

Testo che scorre

Anteprima

Anteprima + codici (member only) - HTML, CSS

Images sequence with fade - HTML, CSS

Sequenza di immagini con fade

Anteprima

Anteprima + codici (member only) - HTML, CSS

Ken burns effect - HTML, CSS

Effetto ken-burns (zoom)

Anteprima

Anteprima + codice (member only) - HTML, CSS

Flowing light - HTML, CSS

Luce che scorre

Anteprima

Anteprima + codice (member only) - HTML, CSS


Rotations (automatic and onmouseover)

Various rotations - HTML, CSS

Rotazioni varie

Anteprima

Anteprima + codici (member only) - HTML, CSS

Rotating images - HTML, CSS

Immagini che ruotano

Anteprima

Anteprima + codici (member only) - HTML, CSS

Swinging card - HTML, CSS

Cartellino oscillante

Anteprima

Anteprima + codice (member only) - HTML, CSS


Scroll animations

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: