Scopri come realizzare un effetto di scorrimento orizzontale elegante e moderno utilizzando GSAP e il plugin ScrollTrigger. Questo tutorial ti mostrerà come animare i contenuti in senso orizzontale anziché verticale, creando un impatto visivo unico.
1. Struttura HTML
Per prima cosa, nell’index.html suddividiamo il layout in sezioni. Il contenitore .container ospita due “pannelli” (.panel), ai quali applicheremo l’effetto di scrolling orizzontale. Ecco una struttura di esempio:
<section class="banner">
<!-- content here -->
</section>
<div class="container">
<section class="panel">
<!-- content here -->
</section>
<section class="panel">
<!-- content here -->
</section>
</div>
<section class="footer">
<!-- content here -->
</section>Nel <head> ricordati di importare le librerie GSAP e ScrollTrigger, necessarie per animare correttamente gli elementi.
2. Stili CSS
Nella sezione <style> o nel tuo file styles.css, definisci le regole per l’aspetto grafico e l’impostazione dell’effetto orizzontale.
html {
overflow-y: scroll;
height: 100%;
}
body {
overflow-y: visible;
height: unset;
margin: 0;
/* Altre proprietà come font, colore testo, ecc. */
}
.container {
width: 200%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
background: #f7f7f7;
}
section.panel {
width: 100%;
height: 100%;
}
/* Esempio di colore per i pannelli dispari */
.container .panel:nth-child(odd) {
background: #a50000; /* rosso scuro */
}overflow-y: scrollsu<html>: abilita lo scorrimento verticale del documento.overflow-y: visiblesubody: rimuove gli eventuali comportamenti predefiniti di altezza e margini..containerconwidth: 200%: impostando due pannelli affiancati, la larghezza totale diventa 200%..panelconwidth: 100%: ogni pannello occupa tutta la larghezza del viewport, consentendo l’effetto di “slittamento” orizzontale.
3. JavaScript e GSAP
Per animare i pannelli, registra ScrollTrigger in GSAP e imposta l’animazione che muoverà gli elementi orizzontalmente in base allo scroll dell’utente.
gsap.registerPlugin(ScrollTrigger);
const sections = gsap.utils.toArray(".panel");
const container = document.querySelector(".container");
gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".container",
pin: true, // Blocca il container in posizione
scrub: 1, // L'animazione segue lo scroll in modo fluido
snap: 1 / (sections.length - 1), // Passa in modo uniforme da un pannello all’altro
end: () => `+=${container.offsetWidth}`, // Distanza totale di scroll
},
});pin: true: fissa il contenitore.container, simulando lo scrolling verticale mentre il contenuto si muove in orizzontale.scrub: 1: rende il movimento fluido e legato alla velocità di scroll.snap: 1 / (sections.length - 1): forza il passaggio da un pannello al successivo in modo deciso.end: () => \+=${container.offsetWidth}“: definisce la lunghezza dell’animazione in base alla larghezza complessiva dei pannelli.
4. Conclusioni
Implementare lo scrolling orizzontale con GSAP e ScrollTrigger è un modo eccellente per dare al tuo sito un aspetto dinamico e accattivante. Ricorda di testare il risultato su vari dispositivi e browser per garantire la massima compatibilità. Con questi concetti di base, puoi personalizzare i colori, il numero di pannelli e persino introdurre transizioni più complesse.
Buon divertimento con le animazioni web!
Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.
