Membership index

NOTA:I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.

Lista delle risorse scaricabili con donazione

PROMEMORIA GENERALE:

NOTA: Le CSS Animations non funzionano su Internet Explorer 9 e precedenti.
Per rendere continuo il ciclo di una animazione, aggiungete, o modificate questa regola affinchè sia impostata su "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:


Per eseguire diverse animazioni con un ritardo progressivo, aggiungo anche le regole "visibility: hidden" e "animation-fill-mode: forwards"

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

Leggi anche: Impariamo a creare un'animazione
NOTA: per provare i codici, puoi utilizzare l'HTML Editor.

ATTENZIONE: Non dimenticate di aggiungere i vendor prefixes ai codici css di base.

---

Generators

Generatori

Animations generator

Generatore di animazioni

cubic bezier curve generator

Generatore di curva cubic-bezier

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 - HTML, CSS

Galleria di immagini con animazione al passaggio del mouse - HTML, CSS

Preview + code

Zoom effects - HTML, CSS

Effetto zoom - HTML, CSS

Preview + code

Filter effects - HTML, CSS

Effetto filtro - HTML, CSS

Preview + code

Change image onmouseover - HTML, CSS

Cambio di immagine al passaggio del mouse - HTML, CSS

Preview + code

Push effects - HTML, CSS

Effetti push - HTML, CSS

Preview + code

Automatic animations

Animazioni automatiche

Animated titles - HTML, CSS

Titoli animati - HTML, CSS

Preview + code

Running text - HTML, CSS

Testo che scorre - HTML, CSS

Preview + code

1c-Running text in footer- HTML, CSS

1c-Testo che scorre in fondo alla pagina - HTML, CSS

Preview + download

1a-Images sequence with fade - HTML, CSS

1a-Sequenza di immagini con fade - HTML, CSS

Preview + download

Ken burns effect - HTML, CSS

Effetto ken-burns - HTML, CSS

Preview + code

Ken burns effect 2 - HTML, CSS

Effetto ken-burns 2 - HTML, CSS

Preview + code

Flowing light - HTML, CSS

Luce che scorre - HTML, CSS

Preview + code

Animated zigzag - HTML, CSS

zigzag animato - HTML, CSS

Preview + code

Animated dividers SVG - HTML, CSS

Separatori animati SVG - HTML, CSS

Preview + code

Rotations

Rotazioni

Various rotations - HTML, CSS

Rotazioni varie - HTML, CSS

Preview + code

1b-Rotating images - HTML, CSS

1b-Immagini che ruotano - HTML, CSS

Preview + download

Rotating image on click - HTML, CSS

Immagine che ruota al click - HTML, CSS

Preview + code

Swinging card - HTML, CSS

Cartellino oscillante - HTML, CSS

Preview + code

Other

Altro

Followed mouse

Mouse inseguito

Necessita di jQuery.

Apri codice:

<style>
#movingImg{
    width:20px;
    height:20px;
    position:absolute;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}
</style>

<img id="movingImg" src="https://cdn.pixabay.com/photo/2020/11/27/17/34/sphere-5782519_1280.png" />

<script>
$(document).mousemove(function(e){
    $("#movingImg").css({left:e.pageX, top:e.pageY});
});
</script>

Scroll animations

Animazioni allo scroll

Per fare in modo che il browser esegua l'animazione allo scroll della pagina, dobbiamo ricorrere a javascript.
Ci sono diverse librerie per lo scopo, una di queste è wow.js.
È possibile includerla via CDN in questo modo:

Subito sotto, mettete questo script:

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

Lazy loading for off-screen images

Lazy loading per immagini fuori schermo

In alcuni casi, le immagini che entrano nello schermo allo scroll possono causare un avviso nel test di pagespeed (Rimanda immagini fuori schermo) che diminuisce il punteggio di performance. Per evitare questo, si possono caricare le immagini in "Lazy loading" (caricamento lento) con questo script jQuery:

Apri codice:

<script>
    function init() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute('data-src')) {
    imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
    }
    }
    }
    window.onload = init;
</script>

Nel collegamento all'immagine, si sostituisce src con data-src.
Esempio:
<img data-src="" alt="">

Membership index