Come creare un effetto di rotazione durante lo scroll con HTML, CSS e JavaScript

Le animazioni legate allo scroll sono tecniche avanzate di web design che permettono di creare siti web dinamici e moderni. Questo tutorial si concentra su come realizzare un effetto di rotazione di un'immagine durante lo scroll della pagina, un metodo efficace per attirare l'attenzione degli utenti e migliorare l'esperienza di navigazione.

Questa tecnica è particolarmente utile per web designer, sviluppatori front-end e chiunque desideri arricchire le proprie competenze in animazioni web. L'effetto può essere applicato a immagini, prodotti, loghi o altri elementi grafici all'interno di una Hero Section o di una landing page.

Per implementare questa animazione, utilizzeremo esclusivamente HTML, CSS e JavaScript, i linguaggi fondamentali per strutturare, stilizzare e animare gli elementi di una pagina web.

• HTML: per creare la struttura della pagina e definire gli elementi coinvolti nell'animazione.
• CSS: per centrare l'immagine e definire le dimensioni dell'area di scroll.
• JavaScript: per collegare la rotazione dell'immagine alla posizione dello scroll.

Alla fine di questa guida, avrai un'immagine che ruota progressivamente mentre l'utente scorre la pagina, creando un effetto visivamente accattivante e moderno.

Prerequisiti

• Hardware: Un computer con accesso a internet
• Software: Un editor di codice (es. Visual Studio Code, Sublime Text)
• Conoscenze: Basi di HTML, CSS e JavaScript

PROCEDURA: Creazione di un'immagine che ruota durante lo scroll

• HTML per la struttura della pagina
• CSS per lo stile e il posizionamento degli elementi

Passo 1: Creazione della struttura HTML

Inizia creando una sezione abbastanza alta per permettere di vedere chiaramente l'animazione durante lo scroll.

• Crea un file HTML e incolla il seguente codice:

 
  

 
Continua a scorrere
 
L'immagine ruota in base alla posizione dello scroll.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 

Passo 2: Aggiunta dello stile CSS

Definisci le dimensioni dell'area di scroll e centra l'immagine nella pagina web.

 { margin: 0; padding: 0; box-sizing: border-box;
}
body { font-family: Arial, sans-serif; background: #111; color: white;
}
.scroll-section { height: 200vh; display: flex; justify-content: center; align-items: flex-start; padding-top: 150px;
}
.image-wrapper { position: sticky; top: 30vh;
}
.scroll-image { width: 300px; height: 300px; object-fit: contain; display: block; transform: rotate(0deg); transition: none;
}
.content { min-height: 100vh; padding: 100px 10%; background: white; color: #222;
}
.content h2 { margin-bottom: 30px; font-size: 45px;
}
.content p { margin-bottom: 25px; line-height: 1.8;
}

Passo 3: Aggiunta del codice JavaScript

const image = document.querySelector(".scroll-image");
window.addEventListener("scroll", () => { const scroll = window.scrollY; const rotation = scroll  0.5; image.style.transform = `rotate(${rotation}deg)`;
});

Passo 4: Personalizzazione della velocità di rotazione

Modifica la velocità di rotazione dell'immagine cambiando il valore utilizzato nel calcolo.

• Per una rotazione più veloce, usa:

const rotation = scroll  1;

const rotation = scroll  0.2;

Verifica e Troubleshooting

Dopo aver implementato l'effetto di rotazione legato allo scroll, è importante verificare che funzioni correttamente e risolvere eventuali problemi.

Come testare se funziona

• Verifica della rotazione: Scorri la pagina e osserva se l'immagine ruota progressivamente. L'immagine dovrebbe iniziare con una rotazione di 0 gradi e aumentare man mano che scorre la pagina.
• Controllo della posizione: Assicurati che l'immagine rimanga fissa nella posizione specificata (top: 30vh) durante lo scroll.
• Test su diversi dispositivi: Verifica che l'effetto funzioni correttamente su diversi dispositivi e browser per garantire la compatibilità.

Cosa fare se fallisce

• Problemi di rotazione: Se l'immagine non ruota, controlla che il codice JavaScript sia correttamente collegato all'elemento HTML e che l'event listener per lo scroll sia attivo.
• Problemi di posizione: Se l'immagine non rimane fissa durante lo scroll, verifica che la classe .image-wrapper abbia la proprietà position: sticky e che il valore top sia impostato correttamente.
• Problemi di dimensioni: Se l'immagine non ha le dimensioni corrette, controlla che le proprietà width e height nella classe .scroll-image siano impostate correttamente.

Ora puoi applicare questa tecnica per rendere i tuoi progetti web più dinamici e moderni.

• Hai creato una struttura HTML per ospitare l'immagine e il contenuto.
• Hai appreso come personalizzare la velocità di rotazione modificando il valore di moltiplicazione.

Metti in pratica quanto appreso e sperimenta con diverse immagini e velocità di rotazione per ottenere l'effetto desiderato.