Как создать эффект сужающейся Hero-секции при прокрутке с помощью HTML, CSS и JavaScript

Le Hero Section occupano spesso l'intera schermata iniziale di un sito web, ma possiamo renderle ancora più coinvolgenti aggiungendo un effetto di riduzione durante lo scroll. Questo tipo di animazione viene utilizzato frequentemente nei siti moderni per migliorare l'esperienza utente e dare maggiore risalto ai contenuti che seguono. Come creare un effetto Hero Shrink con HTML, CSS e JavaScript In questo tutorial vedremo come creare una Hero Section animata con effetto scroll utilizzando solamente HTML, CSS e JavaScript. Realizzeremo una sezione iniziale a grande impatto visivo che, durante lo scorrimento della pagina, si ridurrà progressivamente in altezza fino a integrarsi naturalmente con il resto del contenuto. Analizzeremo passo dopo passo come rilevare la posizione dello scroll dell'utente tramite JavaScript e come applicare modifiche dinamiche agli elementi HTML attraverso le proprietà CSS. Grazie a questa tecnica sarà possibile creare animazioni fluide e moderne senza dipendere da plugin o librerie esterne. L'effetto finale permetterà di ottenere una navigazione più elegante e coinvolgente, una soluzione particolarmente utile per homepage, siti creativi, portfolio, agenzie digitali e qualsiasi progetto web che voglia distinguersi con un'esperienza utente più dinamica. Questo effetto è ideale per landing Page, portfolio, siti aziendali e creativi. Risultato finale Durante lo scroll della pagina la Hero Section subirà una trasformazione progressiva: partirà occupando l'intera altezza dello schermo, creando un'imponente area introduttiva, per poi ridursi gradualmente fino a diventare una sezione più compatta e integrata con il resto del contenuto. Il contenuto interno rimarrà sempre perfettamente centrato durante tutta l'animazione, mantenendo equilibrio visivo e leggibilità. Grazie alla gestione dinamica delle dimensioni tramite CSS e JavaScript sarà possibile ottenere un effetto fluido, senza movimenti bruschi o cambiamenti improvvisi nella disposizione degli elementi. Questa tecnica permette di creare una transizione elegante tra la prima schermata del sito e le sezioni successive, migliorando l'esperienza di navigazione e dando alla pagina un aspetto più moderno e professionale. Struttura HTML Creiamo una Hero a schermo intero e del contenuto sottostante per poter testare lo scroll. <section class="hero"> <div class="hero-content"> <h1>Hero Section Animation</h1> <p>Scrolla la pagina per vedere l'effetto.</p> </div> </section> <section class="content"> <h2>Contenuto della pagina</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat massa sed velit volutpat, vitae tincidunt metus feugiat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat massa sed velit volutpat, vitae tincidunt metus feugiat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat massa sed velit volutpat, vitae tincidunt metus feugiat.</p> </section> Abbiamo creato la struttura di base della pagina definendo una Hero Section iniziale ad alto impatto visivo e una successiva area di contenuto che ci permetterà di testare concretamente il comportamento dell'animazione durante lo scroll. La Hero rappresenterà il punto di partenza dell'esperienza utente, mentre la sezione sottostante fungerà da elemento di confronto per osservare come la prima area della pagina si riduce progressivamente man mano che l'utente naviga verso il basso. Questa configurazione ci consentirà di verificare il corretto funzionamento della trasformazione, controllando che il ridimensionamento avvenga in modo fluido, mantenendo il contenuto centrato e garantendo una transizione naturale tra la schermata iniziale e il resto della pagina. Creiamo lo stile CSS Ora creiamo lo stile CSS della Hero definendo la struttura iniziale e il comportamento visivo della sezione. * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #fff; color: #fff; } .hero { width: 100%; height: 100vh; margin: 0 auto; border-radius: 0; display: flex; justify-content: center; align-items: center; text-align: center; background: linear-gradient( 135deg, #4f46e5, #06b6d4 ); transition: width .15s linear, height .15s linear, border-radius .15s linear; overflow: hidden; } .hero-content h1 { font-size: clamp(45px, 7vw, 80px); margin-bottom: 20px; } .hero-content p { font-size: 22px; } .content { padding: 80px 10%; background: #ffffff; color: #333; min-height: 200vh; } .content h2 { margin-bottom: 20px; } .content p { margin-bottom: 25px; line-height: 1.8; } La Hero viene inizialmente impostata con un'altezza pari a 100vh, ovvero il 100% dell'altezza della finestra del browser. Questa unità di misura permette alla sezione di occupare completamente lo spazio disponibile sullo schermo, creando una prima schermata immersiva e visivamente d'impatto. La proprietà CSS transition viene utilizzata per rendere il cambiamento delle dimensioni più naturale e graduale. In questo modo, quando JavaScript modificherà l'altezza della Hero durante lo scroll, la trasformazione non avverrà in modo immediato, ma attraverso un'animazione fluida e piacevole per l'utente. Grazie alla combinazione tra 100vh, transizioni CSS e modifica dinamica degli stili tramite JavaScript, possiamo ottenere un effetto moderno in cui la Hero si adatta progressivamente alla navigazione, mantenendo un'esperienza visiva elegante e professionale. Riduciamo la Hero durante lo scroll Con JavaScript andiamo a controllare lo scorrimento della pagina tramite l'evento scroll, rilevando in tempo reale la posizione raggiunta dall'utente durante la navigazione. In base alla quantità di pixel percorsi, modifichiamo progressivamente l'altezza della Hero Section, passando dal valore iniziale di 100vh ad una dimensione più compatta. Questo permette alla sezione di adattarsi dinamicamente al comportamento dell'utente, creando una trasformazione continua invece di un semplice cambio improvviso. La logica JavaScript si occuperà quindi di calcolare il livello di riduzione necessario e applicare il nuovo valore direttamente allo stile dell'elemento, mentre le proprietà CSS gestiranno la fluidità del movimento. Il risultato finale sarà un effetto scroll elegante e naturale, dove la Hero sembra ridursi gradualmente accompagnando l'utente verso il contenuto successivo della pagina. const hero = document.querySelector(".hero"); window.addEventListener("scroll", () => { const scroll = window.scrollY; // Altezza minima const minHeight = 320; const height = Math.max( window.innerHeight - scroll, minHeight ); // Larghezza minima const minWidth = 75; const width = Math.max( 100 - (scroll / 8), minWidth ); // Arrotondamento const radius = Math.min(scroll / 4, 40); hero.style.height = height + "px"; hero.style.width = width + "%"; hero.style.borderRadius = radius + "px"; }); Ad ogni scroll recuperiamo la distanza percorsa dall'utente e riduciamo l'altezza della Hero. Quando viene raggiunta un'altezza minima di 300px, l'animazione si interrompe evitando che la sezione diventi troppo piccola. Con poche righe di HTML, CSS e JavaScript abbiamo realizzato una Hero Section moderna che si restringe durante lo scroll. È un effetto molto utilizzato nelle landing page e nei siti professionali perché migliora la percezione del movimento e accompagna naturalmente l'utente verso il contenuto della pagina.