/** * SCROLL REVEAL * Gli elementi con [data-reveal] entrano salendo leggermente dal basso * quando arrivano in viewport. * * Uso nei template: *
-> anima l'elemento stesso *
-> anima i figli diretti, uno dopo l'altro * data-reveal-delay="200" -> ritardo fisso in ms; sostituisce la cascata * automatica (usalo sui singoli elementi) * * La cascata la calcola il JS su chi entra insieme in viewport, non sull'ordine * nel DOM: una griglia lunga o un testo lungo si rivelano man mano che scorri. * * Nota SEO/accessibilita': il contenuto e' sempre nel DOM. Lo stato "nascosto" * si applica solo se il JS e' attivo (classe .has-reveal su , messa * nell'head prima del primo disegno) ed e' disattivato se l'utente ha * chiesto meno animazioni. */ .has-reveal [data-reveal]:not([data-reveal="group"]), .has-reveal [data-reveal="group"]> :not([data-reveal]) { opacity: 0; transform: translateY(2.5rem); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } /* Nota: questi selettori ripetono per intero quelli qui sopra + .is-revealed. Servono ad avere una specificita' piu' alta della regola che nasconde, altrimenti l'elemento resterebbe invisibile per sempre. */ .has-reveal [data-reveal]:not([data-reveal="group"]).is-revealed, .has-reveal [data-reveal="group"]> :not([data-reveal]).is-revealed { opacity: 1; transform: none; } /* Finita l'animazione togliamo will-change: evita testi sfocati e artefatti. */ .has-reveal [data-reveal]:not([data-reveal="group"]).is-reveal-done, .has-reveal [data-reveal="group"]> :not([data-reveal]).is-reveal-done { will-change: auto; transition: none; } @media (prefers-reduced-motion: reduce) { .has-reveal [data-reveal]:not([data-reveal="group"]), .has-reveal [data-reveal="group"]> :not([data-reveal]) { opacity: 1; transform: none; transition: none; } }