Animazioni stile template Prowess — Design

Data: 2026-07-02 · Stato: approvato dall'operatore

Obiettivo

Il sito InsanityLab, oggi quasi del tutto statico, deve riprendere il linguaggio di animazione del template WordPress "Prowess" (Qode Interactive) da cui deriva il design Figma. L'operatore ha scelto il pacchetto completo: reveal allo scroll, parallax degli sfondi, animazione d'ingresso della hero, effetti hover su card e team, e citazione con testo a scorrimento continuo.

Evidenze raccolte dal template

Dalla demo ufficiale prowess.qodeinteractive.com (cassetta.me è in manutenzione):

gli elementi appaiono allo scroll con un offset di attivazione di −100 px dal viewport (qodefElementAppearAmount: -100);
due sezioni usano parallax di sfondo (data-parallax-bg-speed="1");
la hero è uno Slider Revolution con testi che entrano in sequenza;
card e foto hanno hover con zoom immagine e transizioni morbide.

Decisioni

Implementazione vanilla: CSS + IntersectionObserver, nessuna libreria. Il sito non ha dipendenze frontend e resta così; costo totale ~2 KB.
Citazione: si mantiene il banner su foto scura del Figma, ma il testo della citazione scorre in orizzontale a loop infinito come il marquee del template (scelta esplicita dell'operatore). La firma "Insanitylab" resta statica.
Accessibilità: con prefers-reduced-motion: reduce ogni animazione è disattivata (reveal, marquee, parallax, hero). Senza JavaScript il sito resta interamente visibile: lo stato nascosto si applica solo sotto html.js.

Architettura

src/styles/global.css — utilities: [data-reveal] (stato iniziale opacity: 0 + translateY(40px), transizione .9s ease; varianti left, right, fade; ritardo per stagger via variabile --reveal-delay impostata inline), keyframes marquee, blocco prefers-reduced-motion.
src/layouts/Base.astro — uno script inline in <head> aggiunge la classe js a <html> prima del paint (evita flash); uno script bundled attiva l'IntersectionObserver (rootMargin: 0 0 -100px, unobserve dopo il primo ingresso) e il parallax (transform: translateY calcolato su scroll con requestAnimationFrame, velocità ~0.3, attivo solo da 992 px in su e senza reduced-motion).
Componenti — ricevono attributi data-reveal e stagger inline; nessuna modifica strutturale se non il wrapper overflow per gli zoom hover e la ristrutturazione del banner citazione (sfondo su div dedicato trasformabile, testo in marquee con copia aria-hidden).

Dettaglio per componente

Componente	Effetto
HeroSlider	Ingresso al load: righe del titolo slide-up in sequenza (stagger 150 ms), bottone dopo, immagine da destra con fade
InfoColumns	Reveal fade con stagger 0/150/300 ms
FeatureBlocks	Immagine entra dal proprio lato, testo dal lato opposto
QuoteBanner	Sfondo parallax + testo citazione in marquee loop (pausa su hover), firma statica
TrainingCards	Reveal con stagger; hover zoom foto (wrapper overflow hidden)
ProgramsGrid	Heading reveal; item con stagger; hover: traslazione -4 px e colore
Agenda	Reveal heading e tabella
TeamSection	Head reveal; card con stagger; hover zoom foto
MethodSteps	Heading reveal; step con stagger
PartnersStrip	Reveal fade dell'intera striscia
PageHero (pagine interne)	Reveal del titolo all'ingresso pagina
Header	Transizione morbida dell'ombra già presente
Bottoni `.btn`	Freccia trasla a destra su hover

Errori e casi limite

JS assente: nessun elemento nascosto (gate su html.js).
Reduced motion: contenuto immediatamente visibile, marquee fermo su testo statico multilinea.
Il marquee usa due copie identiche del segmento (translateX(-50%)) per loop senza scatti; la seconda copia è aria-hidden.
Solo opacity e transform: nessun layout shift, nessun impatto CLS.

Verifica

Build senza errori, vitest esistenti verdi, controllo visivo locale su homepage e pagine interne, poi deploy su VPS e smoke test produzione.

Fuori scope

Slider hero multi-slide automatico (oggi esiste una sola slide), animazioni admin, contatori animati e BMI calculator (assenti dal design Figma).

4.1 KiB Raw Blame History Unescape Escape