/* ================================================================ ReaLink - MOTION SYSTEM (css) File nuovo, autonomo. Va caricato DOPO css/style.css. Non ridefinisce colori, font o componenti: solo movimento. Tutte le classi hanno prefisso "rl-" per non entrare in conflitto con il sistema gia presente in style.css / main.js (.reveal, .stagger, .pop-in, .card-tilt, .scene-3d, [data-parallax], [data-count], [data-fill] restano intatti e continuano a funzionare). REGOLA DI SICUREZZA Gli stati iniziali "nascosti" sono attivi SOLO sotto .rl-js, classe che js/motion.js aggiunge a . Se il JS non parte, o va in errore prima di partire, i contenuti restano visibili e leggibili. INDICE 00. Token di movimento 01. Gate .rl-js + reduced motion 02. Smooth scroll (stato del documento) 03. Reveal allo scroll (up / left / right / scale / fade) + stagger 04. Parallax a strati 05. Pseudo 3D (prospettiva, raddrizzamento mockup, tilt) 06. Numeri che salgono 07. Testo a comparsa per i titoli 08. Sticky storytelling 09. Utility 10. Mobile ================================================================ */ /* ================================================================ 00. TOKEN DI MOVIMENTO Solo tempi, curve e distanze. Nessun colore nuovo. ================================================================ */ :root { /* Curve. Coerenti con --t-base di style.css (.22,.61,.36,1) */ --rl-ease: cubic-bezier(.22, .61, .36, 1); /* uscita morbida, uso generale */ --rl-ease-soft: cubic-bezier(.16, 1, .3, 1); /* uscita molto lunga, per i sigilli */ --rl-ease-in-out: cubic-bezier(.65, 0, .35, 1); /* andata e ritorno */ /* Durate */ --rl-dur-fast: 380ms; --rl-dur: 680ms; --rl-dur-slow: 980ms; /* Distanze di partenza dei reveal */ --rl-dist-y: 34px; /* comparsa dal basso */ --rl-dist-x: 46px; /* comparsa laterale */ --rl-scale: .94; /* comparsa in scala */ /* Passo dello sfalsamento (stagger) tra elementi di un gruppo */ --rl-stagger-step: 90ms; /* Prospettiva di default delle scene pseudo 3D */ --rl-perspective: 1400px; /* Altezza di default di una sezione sticky storytelling */ --rl-sticky-length: 300vh; --rl-sticky-top: 0px; } /* ================================================================ 01. GATE .rl-js + .rl-armed .rl-js viene messo su da js/motion.js: da quel momento valgono gli stati iniziali (elementi nascosti). .rl-armed viene messo subito dopo, ma solo dopo un ricalcolo di stile forzato. Serve a questo: gli stati iniziali entrano in vigore SENZA transizione (nessuna dissolvenza al contrario dei contenuti gia dipinti), e solo da li in poi le transizioni sono attive per l'entrata vera. Senza JS nessuna regola di questo file nasconde nulla. ================================================================ */ /* Nessuno stato iniziale fuori da .rl-js: e voluto. */ /* ================================================================ 02. SMOOTH SCROLL - stato del documento .rl-smooth viene messo su da motion.js solo quando lo smooth scroll a inerzia e realmente attivo (desktop, puntatore fine, motion non ridotto). In quel caso lo scroll nativo "smooth" di style.css va spento, altrimenti le due animazioni si combattono: gli anchor interni li gestisce motion.js con la stessa inerzia. ================================================================ */ html.rl-smooth { scroll-behavior: auto; } /* Durante il trascinamento inerziale evitiamo che il testo venga selezionato per sbaglio dal gesto del trackpad. */ html.rl-smooth.rl-scrolling body { -webkit-user-select: none; user-select: none; } /* ================================================================ 03. REVEAL ALLO SCROLL Uso:
oppure data-rl-reveal="left" Varianti: up (default) | left | right | scale | fade Modificatori: .rl-reveal-slow, .rl-reveal-fast Lo stato finale e la classe .rl-in, aggiunta da motion.js quando l'elemento entra nel viewport (IntersectionObserver). ================================================================ */ /* Stato iniziale comune a tutte le varianti. Il transform e uno solo, parametrico: le varianti cambiano solo le variabili di partenza. Qui nessuna transizione: lo stato iniziale deve arrivare secco. */ .rl-js .rl-reveal, .rl-js [data-rl-reveal] { opacity: 0; transform: translate3d(var(--rl-from-x, 0px), var(--rl-from-y, var(--rl-dist-y)), 0) scale(var(--rl-from-s, 1)); transition: none; will-change: transform, opacity; } /* Transizioni attive solo dopo l'armamento (vedi punto 01). */ .rl-js.rl-armed .rl-reveal, .rl-js.rl-armed [data-rl-reveal] { transition: opacity var(--rl-dur) var(--rl-ease) var(--rl-delay, 0ms), transform var(--rl-dur) var(--rl-ease) var(--rl-delay, 0ms); } /* Stato finale: elemento al suo posto naturale. */ .rl-js .rl-reveal.rl-in, .rl-js [data-rl-reveal].rl-in { opacity: 1; transform: none; } /* Variante: dal basso (default esplicito) */ .rl-js .rl-reveal-up, .rl-js [data-rl-reveal="up"] { --rl-from-x: 0px; --rl-from-y: var(--rl-dist-y); --rl-from-s: 1; } /* Variante: da sinistra */ .rl-js .rl-reveal-left, .rl-js [data-rl-reveal="left"] { --rl-from-x: calc(var(--rl-dist-x) * -1); --rl-from-y: 0px; --rl-from-s: 1; } /* Variante: da destra */ .rl-js .rl-reveal-right, .rl-js [data-rl-reveal="right"] { --rl-from-x: var(--rl-dist-x); --rl-from-y: 0px; --rl-from-s: 1; } /* Variante: in scala. Ottima per i due sigilli delle garanzie. */ .rl-js .rl-reveal-scale, .rl-js [data-rl-reveal="scale"] { --rl-from-x: 0px; --rl-from-y: 14px; --rl-from-s: var(--rl-scale); /* Curva piu lunga: la variabile viene letta dalla transizione, cosi non serve alzare la specificita del selettore. */ --rl-ease: var(--rl-ease-soft); } /* Variante: solo dissolvenza, nessuno spostamento. */ .rl-js .rl-reveal-fade, .rl-js [data-rl-reveal="fade"] { --rl-from-x: 0px; --rl-from-y: 0px; --rl-from-s: 1; } /* Modificatori di durata */ .rl-js .rl-reveal-slow { --rl-dur: var(--rl-dur-slow); } .rl-js .rl-reveal-fast { --rl-dur: var(--rl-dur-fast); } /* --- Stagger di gruppo ----------------------------------------- Uso: