jQuery.animate(): come progettare le animazioni per il tuo sito web

Il metodo jQuery.animate() offre numerose possibilità per la creazione di effetti e garantisce la loro perfetta rappresentazione su diversi browser. Questi vantaggi ne fanno un’applicazione apprezzata dagli sviluppatori e dalle sviluppatrici per integrare animazioni semplici o complesse nei siti web.

Che cos’è il metodo jQuery.animate()?

JQuery.animate() è una funzione della libreria jQuery che permette di creare animazioni sui siti web. Questo metodo incide sulle proprietà CSS di un elemento HTML, ad esempio posizione, dimensioni, colore o trasparenza. Inoltre è utilizzabile in modo efficace con altri metodi jQuery, come jQuery.find() o jQuery.on(). Con jQuery.css() è anche possibile definire gli stati iniziali delle proprietà CSS che passano quindi a determinati valori di destinazione con un’animazione CMS: ad esempio puoi implementare jQuery in WordPress in modo facile e veloce.

Se desideri saperne di più sui concetti fondamentali di jQuery, ti consigliamo di seguire il tutorial su jQuery nella nostra guida.

La sintassi del metodo jQuery.animate()

La struttura di jQuery.animate() è la seguente:

$(selector).animate({properties}, duration, easing, complete);

• properties: un oggetto contenente le proprietà CSS e i formati di destinazione per l’animazione
• duration: indica la durata dell’animazione in millisecondi
• easing: definisce una funzione di transizione per adeguare l’andamento dell’animazione
• complete: funzione callback opzionale, richiamata dopo il completamento dell’animazione

Quali tipologie di animazioni sono possibili?

Il metodo jQuery.animate() è dotato di diverse opzioni per il controllo delle animazioni, tra cui sequenze, cicli e funzioni di easing.

Animazioni sequenziali

Per eseguire più animazioni una dopo l’altra è possibile richiamare il metodo .animate() più volte in sequenza:

$("#myElement").animate({left: '250px'}).animate({top: '100px'});

Il concatenamento sposta l’elemento prima 250 pixel da sinistra e poi 100 pixel verso il basso.

Cicli di animazione

È anche possibile eseguire un ciclo di effetti utilizzando una funzione callback per richiamare nuovamente l’animazione:

function animateLoop() {
    $("#myElement").animate({left: '250px'}, 1000, function() {
        $("#myElement").animate({left: '0px'}, 1000, animateLoop);
    });
}
animateLoop();

La funzione personalizzata animateLoop() sposta l’elemento 250 pixel verso destra e quindi lo riporta indietro.

Funzioni di easing

Le funzioni di easing di jQuery.animate() ti permettono di modificare l’andamento della velocità dell’animazione:

$("#myElement").animate({left: '250px'}, 1000, 'easeOutBounce');

In questo esempio, la funzione di easing “easeOutBounce” crea un effetto di smorzamento nell’animazione dell’elemento verso destra.

Animazioni durante lo scorrimento

Per far partire un’animazione durante lo scorrimento del sito web, utilizza l’evento jQuery.animate() on scroll:

$(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    var elementPos = $("#myElement").offset().top;
    if (scrollPos > elementPos - 300) {
        $("#myElement").animate({
            backgroundColor: "#ff0000"
            left: "0"
        }, 1000);
    }
});

Qui l’evento scroll (scorrimento) è unito alla finestra. La funzione si attiva a ogni scorrimento. Per prima cosa, $(window).scrollTop() rileva l’attuale posizione di scorrimento. Successivamente, la posizione di myElement è determinata da $("#myElement").offset().top. Se la posizione di scorrimento è 300 pixel più in alto rispetto alla posizione dell’elemento, viene richiamata la funzione jQuery.animate(). In questo caso, il colore di sfondo diventa #ff0000 (rosso) e la posizione sinistra viene impostata a 0. L’animazione dura 1 secondo (1.000 millisecondi).