Nel mondo del web design, i piccoli dettagli possono fare una grande differenza nell’esperienza utente. Un effetto che sicuramente rende un sito accattivante e moderno è il parallax scrolling combinato con l’animazione a scorrimento. Questo articolo ti guiderà attraverso la creazione di un sito che utilizza la potenza delle librerie JavaScript come GSAP e Lenis per ottenere un effetto di parallax dinamico e coinvolgente.
Effetto Parallax: Cosa Significa?
L’effetto parallax crea una percezione di profondità nel sito web, facendo sembrare che gli elementi si muovano a velocità diverse mentre si scorre la pagina. Questo tipo di animazione è ideale per siti moderni e creativi che desiderano catturare l’attenzione dell’utente e migliorare l’engagement.
HTML di Base: Aggiunta delle Librerie GSAP e Lenis
Per iniziare a creare il nostro effetto parallax con scrolling animato, dovremo includere le librerie GSAP e Lenis nel nostro progetto. Queste librerie sono fondamentali per creare l’effetto di scorrimento fluido e le animazioni dinamiche.
Ecco come fare:
- Includi GSAP direttamente dal CDN ufficiale.
- Includi Lenis utilizzando un link esterno.
Aggiungi il seguente codice nel <head> o prima della chiusura del <body> nel tuo documento HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effetto Parallax con GSAP e Lenis</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Sezioni Parallax -->
<section class="parallax parallax--hero">Hero</section>
<section class="parallax parallax--about">About</section>
<section class="parallax parallax--features">Features</section>
<section class="parallax parallax--footer">Footer</section>
<!-- Inclusione delle Librerie GSAP e Lenis -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@latest/bundled/lenis.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Cosa Include Questo Codice?
- CDN di GSAP: Questo include la libreria GSAP, necessaria per creare animazioni avanzate.
- CDN di ScrollTrigger: GSAP include anche il plugin ScrollTrigger, utile per creare animazioni basate sullo scorrimento della pagina.
- CDN di Lenis: Lenis è utilizzato per migliorare la fluidità dello scrolling e aggiungere un effetto di movimento naturale alla pagina.
HTML di Base
Il layout è composto da diverse sezioni che rappresentano diverse parti della pagina, come “Hero”, “About”, “Features” e “Footer”. Queste sezioni hanno lo stesso schema, ma ogni sezione è personalizzata con colori e caratteristiche uniche:
<section class="parallax parallax--hero">Hero</section>
<section class="parallax parallax--about">About</section>
<section class="parallax parallax--features">Features</section>
<section class="parallax parallax--footer">Footer</section>
Questo permette di suddividere la pagina in blocchi verticali che saranno poi animati grazie a JavaScript.
Styling CSS per un Effetto Visivo Accattivante
Per lo stile delle sezioni, utilizziamo delle regole CSS che includono colori di sfondo diversi per ogni parte e un design responsive che riempie tutto lo schermo:
section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 40px;
font-family: "Euclid Circular A", "Poppins", sans-serif;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}Ogni sezione ha un’altezza di 100vh, il che significa che occupa l’intero schermo, creando un effetto fullscreen. L’utilizzo dei colori e delle transizioni visive aiuta a mantenere l’attenzione e a migliorare l’estetica del sito.
JavaScript e Librerie per l’Animazione
Il fulcro di questo progetto è la combinazione di GSAP e Lenis per realizzare l’effetto parallax e per controllare lo scrolling in modo fluido:
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray("section").forEach((section, i) => {
ScrollTrigger.create({
trigger: section,
start: "top top",
pin: true,
pinSpacing: false,
});
});
const lenis = new Lenis({
lerp: 0.07,
});
lenis.on("scroll", ScrollTrigger.update);Utilizzando GSAP, ogni sezione viene “bloccata” (o “pin”) mentre l’utente scorre, creando un effetto di scorrimento a step. In questo modo, ogni sezione si presenta all’utente come un “capitolo” distinto. Lenis viene utilizzato per migliorare la fluidità dello scrolling, rendendo l’esperienza visiva molto più morbida e piacevole.
Come Utilizzare Questo Effetto
L’effetto parallax e scrolling animato può essere utilizzato per:
- Landing Page: Presentare contenuti importanti in maniera distinta e coinvolgente.
- Storytelling Visivo: Far “raccontare una storia” al tuo sito mentre l’utente scorre.
- Portafogli Creativi: Mostrare progetti o portfolio in un formato che cattura l’attenzione.
Questo approccio al web design rende il tuo sito più interattivo e memorabile. Grazie a GSAP e Lenis, puoi implementare animazioni sofisticate senza sacrificare la fluidità dello scorrimento. L’integrazione di animazioni come queste aiuta a costruire un legame emotivo tra l’utente e il contenuto, migliorando l’esperienza generale e aumentando il tempo di permanenza sul sito.
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.
