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
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
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
Zoom effects - HTML, CSS
Effetto zoom - HTML, CSS
Filter effects - HTML, CSS
Effetto filtro - HTML, CSS
Change image onmouseover - HTML, CSS
Cambio di immagine al passaggio del mouse - HTML, CSS
Push effects - HTML, CSS
Effetti push - HTML, CSS
Automatic animations
Animazioni automatiche
Animated titles - HTML, CSS
Titoli animati - HTML, CSS
Running text - HTML, CSS
Testo che scorre - HTML, CSS
1c-Running text in footer- HTML, CSS
1c-Testo che scorre in fondo alla pagina - HTML, CSS
1a-Images sequence with fade - HTML, CSS
1a-Sequenza di immagini con fade - HTML, CSS
Ken burns effect - HTML, CSS
Effetto ken-burns - HTML, CSS
Ken burns effect 2 - HTML, CSS
Effetto ken-burns 2 - HTML, CSS
Flowing light - HTML, CSS
Luce che scorre - HTML, CSS
Animated zigzag - HTML, CSS
zigzag animato - HTML, CSS
Rotations
Rotazioni
Various rotations - HTML, CSS
Rotazioni varie - HTML, CSS
1b-Rotating images - HTML, CSS
1b-Immagini che ruotano - HTML, CSS
Rotating image on click - HTML, CSS
Immagine che ruota al click - HTML, CSS
Swinging card - HTML, CSS
Cartellino oscillante - HTML, CSS
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
Share on Social:
Condividi sui social:
Argomenti del sito correlati: