Atterri su un sito, scorri la pagina e il logo nell'angolo ruota fluidamente, reagendo a ogni movimento della rotellina del mouse. Dà un'impressione di vivacità, competenza tecnica e aggiunge quel tocco speciale che le persone notano.

Creare questa rotazione è più semplice di quanto sembri. Non servono librerie pesanti o megabyte di framework per animazioni. Ti bastano un div, poche righe di CSS e letteralmente un blocco di JavaScript.

Ecco una spiegazione passo passo: dalla preparazione dell'immagine all'adattamento per gli schermi mobile. Il codice è testato, funzionante e non ha dipendenze.

💡 Panoramica rapida:

• Prepara un oggetto SVG o PNG e inseriscilo nell'HTML
• Fissa la posizione con position: fixed e imposta gli offset con le unità viewport
• Aggiungi un gestore scroll in JavaScript che ruota l'oggetto usando transform: rotate()
• Regola la velocità di rotazione dividendo window.scrollY per un coefficiente
• Per il mobile, aggiungi una media query con nuovo posizionamento e tempo di transizione

1. Preparare l'oggetto

L'oggetto può essere qualsiasi cosa: un'icona, un logo, una forma vettoriale, il simbolo di una freccia. Consiglio SVG, non perde nitidezza durante le trasformazioni e pesa quasi nulla. Se la trasparenza è critica e non hai un vettoriale, un PNG andrà bene.

Inserisci l'immagine dentro un div contenitore e mettilo nel body, preferibilmente vicino all'inizio. Un div separato semplifica la gestione: in seguito potrai aggiungere elementi adiacenti o sostituire l'immagine senza toccare la logica di posizionamento.

1
<div id="scrollContainer">
2
  <img src="img/scrollObject.svg" alt="scrollObject" id="scrollObject">
3
</div>

Puoi avere più oggetti, basta assegnare a ciascuno un id univoco e duplicare la logica JS associandola al proprio elemento. Ma per ora, costruiamo un'istanza funzionante.

2. Posizionamento con CSS

Dove posizionare l'oggetto? Dipende dall'obiettivo:

• Angolo in basso a destra, un'icona in miniatura che non interferisce con il contenuto. Classico per blog e portfolio.
• Angolo in alto a sinistra, indicatore di posizione di scorrimento (rotella di progresso).
• Centro del bordo inferiore, grande elemento decorativo che attira l'attenzione sul footer.

Vediamo lo scenario dell'angolo in basso a destra, è universale e non copre la navigazione. Nel CSS, scrivi:

1
#scrollObject {
2
  position: fixed;
3
  right: 3vw;
4
  bottom: 3vh;
5
  top: auto;
6
  width: 7vh;
7
  height: auto;
8
  transition: 0.1s ease-out;
9
}

La chiave è position: fixed. Questo fissa l'elemento rispetto alla finestra del browser, non al documento. Durante lo scorrimento, il contenuto si muove ma l'oggetto resta al suo posto. Le unità vw e vh (percentuali di larghezza e altezza della viewport) adattano automaticamente gli offset a qualsiasi schermo, dallo smartphone al monitor 4K.

La proprietà transition: 0.1s ease-out attenua gli scatti quando si cambia posizione. Per la rotazione il suo ruolo è secondario, ma durante il ridimensionamento o i cambi di media query la transizione appare più pulita.

3. Animazione della rotazione con JavaScript

I CSS possono fare semplici @keyframes, ma il nostro compito è legare l'angolo di rotazione alla posizione di scorrimento. È qui che entra in gioco JavaScript. Codice minimo funzionante:

1
const scrollObject = document.getElementById("scrollObject");
2
 
3
window.addEventListener("scroll", () => {
4
  scrollObject.style.transform = `rotate(${window.scrollY}deg)`;
5
});

Cosa succede qui: window.scrollY restituisce il numero di pixel di cui la pagina è stata fatta scorrere verticalmente. Questo numero viene inserito nella funzione CSS rotate(), un pixel di scorrimento equivale a un grado di rotazione.

Se l'oggetto ruota troppo velocemente, dividi il valore per un coefficiente:

1
const speedFactor = window.scrollY / 2;
2
const scrollObject = document.getElementById("scrollObject");
3
 
4
window.addEventListener("scroll", () => {
5
  scrollObject.style.transform = `rotate(${speedFactor}deg)`;
6
});

Scegli un divisore adatto alla lunghezza della tua pagina. Un valore di /2 dimezza la rotazione, /4 la rende fluida e appena percettibile. Per landing page lunghe usa /6 o /8 in modo che l'oggetto non faccia dieci rotazioni complete a metà pagina.

Nota sulle prestazioni

L'evento scroll si attiva decine di volte al secondo. Su un sito semplice con un solo transform questo è impercettibile, ma se hai più oggetti animati o un DOM pesante, avvolgi la logica in requestAnimationFrame:

1
const scrollObject = document.getElementById("scrollObject");
2
let ticking = false;
3
 
4
window.addEventListener("scroll", () => {
5
  if (!ticking) {
6
    requestAnimationFrame(() => {
7
      scrollObject.style.transform = `rotate(${window.scrollY}deg)`;
8
      ticking = false;
9
    });
10
    ticking = true;
11
  }
12
});

requestAnimationFrame raggruppa le chiamate nei frame di sincronizzazione del browser (di solito 60 fps) e non esegue il ricalcolo dello stile a ogni evento scroll, risparmiando CPU e batteria sui dispositivi mobile.

Aggiungi anche will-change: transform alla regola CSS di #scrollObject. Questo dice al browser di allocare in anticipo un livello di compositing GPU, e la rotazione sarà accelerata via hardware:

1
#scrollObject {
2
  /* ... other properties ... */
3
  will-change: transform;
4
}

4. Adattamento mobile

Su schermi inferiori a 600 pixel, l'angolo in basso a destra potrebbe entrare in conflitto con i menu burger o i pulsanti "torna su". Una soluzione sensata è spostare l'oggetto al centro in basso in modo che non copra gli elementi interattivi:

1
@media only screen and (max-width: 600px) {
2
  #scrollObject {
3
    transition: 0.2s ease-out;
4
    margin-left: -4vh;
5
    width: 8vh;
6
    height: auto;
7
    top: 10px;
8
    left: 50%;
9
  }
10
}

L'oggetto si sposta in cima allo schermo, centrato usando left: 50% con margin-left negativo, una tecnica classica di centratura orizzontale. La larghezza è leggermente aumentata (8vh invece di 7vh) per compensare la minore distanza di visione.

Nota il transition: 0.2s ease-out nella media query. Quando si passa da desktop a mobile (o durante il ridimensionamento della finestra), l'oggetto non "salta" istantaneamente ma si sposta fluidamente nella nuova posizione in 0,2 secondi.

Se lavori con Vue o React, estrai l'oggetto di scorrimento in un componente separato. Puoi collegarlo al root App.vue o nel layout in modo che l'animazione sia presente su tutte le pagine contemporaneamente, senza duplicazione di codice.

Alternativa moderna: animazioni CSS guidate dallo scroll

Nel 2024-2025, i browser Chromium (Chrome, Edge, Opera) hanno ottenuto il supporto nativo per animation-timeline: scroll(), animazioni legate allo scorrimento senza una sola riga di JavaScript. Si presenta così:

1
@keyframes rotate {
2
  to { transform: rotate(360deg); }
3
}
4
 
5
#scrollObject {
6
  animation: rotate linear;
7
  animation-timeline: scroll();
8
}

Pro: zero JavaScript, contro: solo su Chromium per ora (Firefox e Safari lo stanno implementando). Per un miglioramento progressivo puoi combinare: dai la versione CSS ai browser moderni e mantieni il gestore JS come fallback per gli altri. Dettagli su MDN.

⁉️🤔 Domande frequenti

Posso animare non solo la rotazione, ma anche la scala o l'opacità?

Sì. transform supporta più funzioni contemporaneamente. Per far ruotare e rimpicciolire un oggetto allo scorrimento: scrollObject.style.transform = \rotate(${window.scrollY}deg) scale(${1 - window.scrollY / 5000});. L'opacità si gestisce separatamente da transform usando opacity. Puoi combinare fino a cinque o sei parametri, ma testa: trasformazioni multiple su dispositivi poco potenti possono causare micro-scatti. Uno o due parametri più will-change: transform sono un limite sicuro per 60 fps.

Qual è meglio: SVG o PNG per l'animazione?

SVG, senza dubbio. Si ridimensiona senza perdere nitidezza a qualsiasi rotazione e risoluzione dello schermo, pesa meno e il browser lo renderizza come vettore (nessun effetto scalettatura sui bordi dopo rotate). Usa PNG solo se hai già della grafica raster pronta e non hai tempo di rifarla. Evita JPEG per oggetti rotanti, gli artefatti di compressione diventano più visibili dopo la rotazione.

Come faccio a far partire l'animazione solo quando l'oggetto è nell'area visibile?

Usa IntersectionObserver. Invece di collegarti allo scroll globale, tieni traccia se l'oggetto è entrato nel viewport e solo allora abilita la rotazione. Questo risparmia risorse quando l'elemento è fuori schermo. Modello base: crea un observer con threshold: 0, nel callback aggiungi/rimuovi una classe .active e collega il gestore scroll JS alla presenza di questa classe.

Perché l'animazione scatta sul mio sito?

Tre cause tipiche. Prima: manca will-change: transform, il browser non affida l'elemento al compositing GPU e ricalcola il layout a ogni frame. Seconda: proprietà che causano reflow (come width, height, margin o padding) vengono applicate all'elemento dentro lo stesso gestore scroll. Sostituiscile con transform: scale() e transform: translate(). Terza: il callback scroll viene eseguito senza requestAnimationFrame e genera repaint extra tra i frame. Avvolgi la logica nello schema rAF (esempio nella sezione "Nota sulle prestazioni").

JavaScript è obbligatorio? Esistono soluzioni solo CSS.

I @keyframes CSS sono legati al tempo, non alla posizione di scorrimento. È vero, animation-timeline: scroll() cambia le carte in tavola, ma il supporto dei browser è ancora incompleto (vedi sezione 4). A metà 2026, la soluzione JavaScript con scrollY + transform è ancora il modo cross-browser più affidabile per legare la rotazione allo scorrimento. L'intero codice sta in 5 righe, non ha dipendenze e funziona da Internet Explorer 10 fino all'ultimo Chrome.

Dovresti aggiungere un'animazione allo scorrimento al tuo sito?

Ruotare un oggetto allo scorrimento non è solo un "trucco figo". È una micro-interazione che dà al visitatore un feedback tattile: "sto muovendo la pagina e qualcosa sta accadendo". Configurata correttamente, non infastidisce né distrae, ma aggiunge personalità al sito.

Se il sito è minimalista, limitati a un piccolo oggetto nell'angolo e un coefficiente di /4 o /6. Per landing page e portfolio puoi osare di più: un grande elemento centrale con /2, animazione combinata di rotazione e scala, cambio immagine al raggiungimento di un certo scrollY.

Regola principale: l'animazione allo scorrimento deve complementare il contenuto, non competere con esso per l'attenzione. Un solo oggetto, movimento fluido, nessuna invadenza, e il tuo sito sarà ricordato.