Membership index

NOTE: NOTA: Downloads reserved for members can also be made without registration with a free donation in support of the site. I download riservati ai membri possono essere effettuati anche senza registrazione con una donazione libera in sostegno del sito.

List of downloadable sresources with donationLista delle risorse scaricabili con donazione

GENERAL REMINDER: PROMEMORIA GENERALE:

NOTE: CSS Animations do not work in Internet Explorer 9 and earlier versions. NOTA: Le CSS Animations non funzionano su Internet Explorer 9 e precedenti.
To make the loop of an animation continuous, add, or modify this rule so that it is set to "infinite": Per rendere continuo il ciclo di una animazione, aggiungete, o modificate questa regola affinchè sia impostata su "infinite":
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;


To repeat the animation a defined number of times, I indicate this number instead of "infinite".
If you use "@keyframes" with inherent style rules, it is advisable to add the "forwards" command so that, at the stop of the animation, the last frame keeps the rules contained in the relative @keyframe.

In the absence of specific settings, the animation will be performed only once.

To set a delay in execution, I use this rule:
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;


To perform several animations with a progressive delay, I also add the rules "visibility: hidden" and "animation-fill-mode: forwards" Per eseguire diverse animazioni con un ritardo progressivo, aggiungo anche le regole "visibility: hidden" e "animation-fill-mode: forwards"
/*Keep element not visible before animation starts*/
visibility: hidden;

/* Keep element visible after animation finishes */
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;

Animations can be applied to a div, but also to an image, or something else. 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. NOTE: to test the codes you can use the HTML Editor.


Generators

Generatori

Animations generator

Generatore di animazioni

cubic bezier curve generator

Nota: Se aggiungete più animazioni nella stessa pagina, potete implementare le regole di stile comuni una sola volta. Note: If you add multiple animations on the same page, you can implement common style rules only once

Generatore di curva cubic-bezier


Onmouseover animations

Animazioni che si attivano al passaggio del mouse


Note: on touchscreen devices, onmouseover animations can be inactive or malfunctioning.
Important, in this case, that the element to which the animation is applied does not contain a link.
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


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

Need jQuery. Necessita di jQuery.
<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


In order for the browser to scroll the page, we need to use javascript.
There are several libraries for the purpose, one of them is wow.js.
You can include it via CDN like this:
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:

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"
integrity="sha256-z6FznuNG1jo9PP3/jBjL6P3tvLMtSwiVAowZPOgo56U="
crossorigin="anonymous"></script>

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

Now, all that remains is to add the wow class to each animated element that must be activated when scrolling the page. 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 some cases, images that enter the screen on scroll may cause a warning in the pagespeed test (Defer off-screen images) which decreases the performance score. To avoid this, you can load images in "Lazy loading" with this jQuery script: 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:
<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>

In the link to the image, you replacessrc with data-src. Nel collegamento all'immagine, si sostituisce src con data-src.
EsempioExample:
<img data-src="" alt="">

Membership index


Argomenti del sito correlati: