Le animazioni legate allo scroll sono un ottimo modo per rendere un sito web più dinamico e moderno. In questo breve tutorial vedremo nel dettaglio come creare un'immagine che ruota progressivamente mentre l'utente scorre una pagina.
Effetto di rotazione di un'immagine durante lo scroll
L'effetto attorno a cui ruota il nostro progetto è molto semplice da realizzare e può essere utilizzato per immagini, prodotti, loghi o altri elementi grafici all'interno di una Hero Section o di una landing page.
Per il nostro lavoro utilizzeremo solamente:HTML, CSS e JavaScript, cioè tutto quello che serve per dare struttura, stile e dinamicità all'effetto e agli elementi coinvolti.
Il risultato finale con effetto di rotazione
L'immagine verrà visualizzata inizialmente nella sua posizione normale, poi ruoterà progressivamente seguendo lo scroll della pagina web. L'animazione proposta di seguito mostra come dovrebbe funzionare l'effetto che abbiamo intenzione di realizzare
La struttura HTML
Utilizzando HTML creiamo ora una sezione abbastanza alta da permettere di vedere chiaramente l'animazione nel corso dello scroll.
<section class="scroll-section">
<div class="image-wrapper">
<img
class="scroll-image"
src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800"
alt="Scarpa sportiva"
>
</div>
</section>
<section class="content">
<h2>Continua a scorrere</h2>
<p>
L'immagine ruota in base alla posizione dello scroll.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</section>Il codice CSS
Una volta completata la struttura basata su HTML, con il codice CSS centriamo l'immagine nella pagina web e definiamo le dimensioni dell'area di scroll.
* {
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;
}Ecco l'aspetto dell'immagine su cui verrà applicato l'effetto di rotazione durante lo scroll.
Il codice JavaScript
A questo punto, con JavaScript colleghiamo la rotazione della nostra immagine alla posizione dello scroll.
const image = document.querySelector(".scroll-image");
window.addEventListener("scroll", () => {
const scroll = window.scrollY;
const rotation = scroll * 0.5;
image.style.transform = `rotate(${rotation}deg)`;
});Da notare che la variabile scroll contiene la distanza percorsa dalla pagina. Moltiplicandola per un valore pari a 0.5 otteniamo un altro valore che utilizzeremo per determinare i gradi di rotazione dell'immagine.
Personalizzare la velocità di rotazione dell'immagine
Sulla base di quanto fatto fino ad ora puoi facilmente modificare la velocità di rotazione dell'immagine cambiando il valore utilizzato nel calcolo:
const rotation = scroll * 1;Con un valore pari a 1 l'immagine ruoterà più velocemente.
Puoi invece utilizzare un valore come 0.2:
const rotation = scroll * 0.2;per ottenere in output una rotazione che risulti più lenta e delicata.
Conclusioni
Nel corso di questo approfondimento abbiamo creato un effetto di rotazione legato allo scroll utilizzando esclusivamente codice HTML, CSS e JavaScript. Lo stesso metodo potrebbe essere applicato a qualsiasi immagine e diventare la base per animazioni molto più complesse di quella proposta.
Puoi utilizzare questo effetto per prodotti, loghi, fotografie, illustrazioni o elementi decorativi all'interno di una landing page.
