/** * Livello di movimento della landing "Residence Val di Fontana". * * Due comportamenti, entrambi descritti dalle note del .pen: * 1. lo stacking delle sezioni (nota vnpWF, e nota hWmwp per il footer) * 2. la comparsa progressiva degli elementi (note OW0XQ, Bm8aL, cVtBQ, Xqw8k) * * Vive qui e non nel Kit perche' e' comportamento, non design system: non * introduce ne' colori ne' tipografie. Il JS che accompagna la parte 2 e' * stampato inline nell'head da functions.php. */ /* ========================================================================== 1. STACKING "Da questa sezione in giu': allo scroll verso il basso il contenuto sale passando sopra al contenuto precedente. Raggiunta la posizione 0 della viewport, lo scroll riprende il suo comportamento normale." L'effetto non e' la sezione che entra: e' la sezione PRECEDENTE che si ferma. Ogni sezione da #beibo-servizi a #contatti si inchioda quando il suo bordo inferiore tocca il fondo della viewport, e la sezione seguente, che nel flusso comincia esattamente li', le sale sopra fino a coprirla. Quando la nuova sezione ha il bordo alto a 0 la precedente e' sparita del tutto e lo scroll prosegue normale, finche' non tocca a lei fermarsi. Le sezioni si coprono nell'ordine del DOM senza bisogno di z-index: sono tutte posizionate, e fra elementi posizionati con z-index auto dipinge sopra chi viene dopo nel documento. Il footer non e' sticky: non deve fermarsi, deve solo salire sopra #contatti — e per questo basta che sia #contatti a essere fermo. IL PUNTO IN CUI LA SEZIONE SI FERMA `top: 0` fermerebbe la sezione appena il suo bordo ALTO tocca lo zero, e tutto cio' che ha sotto la piega non verrebbe mai mostrato: qui le sezioni sono piu' alte della viewport a ogni breakpoint (#beibo-bosco misura 1477px a 1440x900 e 1853px a 375), si perderebbero fino a 1041px di contenuto. La sezione deve fermarsi piu' tardi: quando il suo bordo BASSO arriva al fondo della viewport, cioe' a `top: 100dvh - altezza`. `bottom: 0` non e' la scorciatoia che sembra: sticky con offset in basso TIRA SU l'elemento dalla sua posizione naturale per tenerlo appeso al fondo dello schermo, invece di trattenerlo. Provato: impila tutte le sezioni in cima alla pagina gia' a scroll 0. L'altezza della sezione il CSS non sa leggerla, quindi la scrive motion.js in --beibo-h e qui si fa solo il conto. Il movimento resta tutto del browser: nessun listener sullo scroll, JS misura e basta. Senza il valore il calcolo da' 0, cioe' il comportamento sticky ordinario. ========================================================================== */ #beibo-servizi, #beibo-xlam, #beibo-bosco, #beibo-contesto, #contatti { position: sticky; /* min() perche' una sezione piu' bassa di una schermata si e' gia' mostrata tutta quando tocca lo zero: li' deve fermarsi, non dopo. */ top: min( 0px, calc( 100dvh - var( --beibo-h, 100dvh ) ) ); } /* -------------------------------------------------------------------------- TINTA DI RIPIEGO SOTTO LE FOTOGRAFIE Le sezioni con solo uno sfondo fotografico hanno background-color `rgba(0,0,0,0)`: finche' l'immagine non e' arrivata sono trasparenti, non scure. Elementor carica quegli sfondi in differita (inietta `background-image: none !important` finche' la sezione non entra nella viewport), quindi alla prima visita la sezione sale sopra la precedente essendo invisibile, e la fotografia compare di colpo a sovrapposizione gia' iniziata. Sul footer si vede benissimo da telefono. Il colore e' la media dei pixel di ciascuna foto, misurata su una riduzione a 64x64: cosi' il momento in cui l'immagine arriva e' uno stacco di dettaglio, non un lampo di colore diverso. -------------------------------------------------------------------------- */ #beibo-bosco { background-color: #4b5d24; } #beibo-contesto { background-color: #c5c5c5; } #beibo-footer { background-color: #ae4613; } /* -------------------------------------------------------------------------- SPAZIO DI LETTURA PRIMA CHE ARRIVI LA SEZIONE SUCCESSIVA Ogni sezione dello stack si ferma quando il suo bordo BASSO tocca il fondo della viewport, e da quel momento la successiva comincia a coprirla. Senza margine, l'ultima riga di testo viene coperta un attimo dopo essere comparsa: su desktop capitava di non fare in tempo a leggerla. Il fondo aggiunto qui e' dentro la sezione, quindi lo copre il suo stesso sfondo — un margine lascerebbe invece intravedere la pagina. Mentre lo si attraversa la sezione e' gia' tutta visibile e la successiva non e' ancora entrata: e' lo "scroll morto" chiesto dal designer, ottenuto senza bloccare lo scorrimento. Si somma al padding che le sezioni hanno gia': nei container "boxed" quello vive su .e-con-inner, questo sull'elemento esterno. -------------------------------------------------------------------------- */ #beibo-servizi, #beibo-xlam, #beibo-bosco, #beibo-contesto { padding-bottom: 25dvh; } /* #contatti non ha uno sfondo suo: e' trasparente e il colore lo mettono le due meta'. Il fondo va quindi dato a loro, o resterebbe una striscia trasparente in cui si vedrebbe la pagina. */ #contatti > .elementor-element { padding-bottom: 25dvh; } /* Il footer sale sopra tutto, header compreso. L'header e' `position: fixed` con z-index 99 messo da Elementor, quindi di suo resterebbe sempre davanti: senza questa riga il footer gli passerebbe sotto. 100 e' il minimo che basta — non un numero grande a caso, cosi' resta chiaro contro che cosa sta gareggiando. Il banner di Complianz sta piu' in alto ancora e continua a vedersi. Coprire l'header non toglie nulla alla navigazione: contiene solo il wordmark, nessun link. */ #beibo-footer { position: relative; z-index: 100; } /* L'impilamento e' movimento legato allo scroll: chi ha chiesto meno animazioni al sistema operativo ottiene una pagina che scorre normale. */ @media (prefers-reduced-motion: reduce) { #beibo-servizi, #beibo-xlam, #beibo-bosco, #beibo-contesto, #contatti { position: relative; } } /* ========================================================================== 2. COMPARSA DEGLI ELEMENTI "Tutti gli elementi, in ordine dall'alto verso il basso, compaiono con un leggero movimento dal basso verso l'alto e opacita' da 0 a 100." Lo stato di partenza sta in un foglio di stile dell'head: gli elementi nascono gia' invisibili e non c'e' il lampo di contenuto che si vedrebbe nascondendoli da JS a pagina disegnata. La classe .beibo-js la mette lo script inline — e non la mette se il sistema chiede meno animazioni, quindi in quel caso nulla di tutto questo si applica. Senza JS la pagina resta interamente leggibile. La sezione del form non e' in lista: nota ZnMF9, "Nessuna animazione". Hero e footer neppure: il .pen non porta note di comparsa su quelle due. ========================================================================== */ /* Stessa lista della regola qui sotto, in forma di stringa: lo script la legge da qui invece di riscriverla, cosi' CSS e JS non possono divergere. Sta su una riga sola perche' una stringa CSS non puo' andare a capo. */ :root { --beibo-rvl: "#beibo-servizi .elementor-element-bservh2, #beibo-servizi .elementor-element-bcard1, #beibo-servizi .elementor-element-bcard2, #beibo-servizi .elementor-element-bcard3, #beibo-servizi .elementor-element-bcard4, #beibo-servizi .elementor-element-bcard5, #beibo-servizi .elementor-element-bcard6, #beibo-xlam .elementor-element-bxlamh2, #beibo-xlam .elementor-element-bxlamp, #beibo-xlam .elementor-element-bxlami, #beibo-xlam .e-n-accordion-item, #beibo-bosco .elementor-element-bboscoh2, #beibo-bosco .elementor-element-bboscoim, #beibo-bosco .elementor-element-bbp1, #beibo-bosco .elementor-element-bbp2, #beibo-bosco .elementor-element-bbp3, #beibo-bosco .elementor-element-bbp4, #beibo-bosco .elementor-element-bboscoh3, #beibo-bosco .elementor-element-bboscop, #beibo-bosco .elementor-element-bstat1, #beibo-bosco .elementor-element-bstat2, #beibo-bosco .elementor-element-bstat3, #beibo-bosco .elementor-element-bstat4, #beibo-contesto .elementor-element-bcontcard"; } /* :where() non e' un vezzo: azzera la specificita' di quello che contiene. Senza, questa regola pesa come un ID e batte .beibo-vis, che di classi ne ha due — la classe veniva aggiunta e non succedeva niente. */ html.beibo-js :where( #beibo-servizi .elementor-element-bservh2, #beibo-servizi .elementor-element-bcard1, #beibo-servizi .elementor-element-bcard2, #beibo-servizi .elementor-element-bcard3, #beibo-servizi .elementor-element-bcard4, #beibo-servizi .elementor-element-bcard5, #beibo-servizi .elementor-element-bcard6, #beibo-xlam .elementor-element-bxlamh2, #beibo-xlam .elementor-element-bxlamp, #beibo-xlam .elementor-element-bxlami, #beibo-xlam .e-n-accordion-item, #beibo-bosco .elementor-element-bboscoh2, #beibo-bosco .elementor-element-bboscoim, #beibo-bosco .elementor-element-bbp1, #beibo-bosco .elementor-element-bbp2, #beibo-bosco .elementor-element-bbp3, #beibo-bosco .elementor-element-bbp4, #beibo-bosco .elementor-element-bboscoh3, #beibo-bosco .elementor-element-bboscop, #beibo-bosco .elementor-element-bstat1, #beibo-bosco .elementor-element-bstat2, #beibo-bosco .elementor-element-bstat3, #beibo-bosco .elementor-element-bstat4, #beibo-contesto .elementor-element-bcontcard ) { opacity: 0; /* 24px: il movimento deve leggersi come un assestamento, non come una scivolata. Oltre i ~40px l'occhio segue lo spostamento invece del contenuto. */ transform: translateY(24px); } /* Un'animazione e non una transizione: Elementor impone gia' una `transition` ai suoi widget con due classi di specificita', e una transizione nostra dovrebbe batterla a colpi di selettori. Le animazioni invece stanno sopra le dichiarazioni normali nella cascata, qualunque sia la specificita'. */ @keyframes beibo-comparsa { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } html.beibo-js .beibo-vis { /* Stessa curva della trasformazione dell'header, cosi' la pagina ha una sola idea di come si muovono le cose. `both` tiene lo stato finale: nessun bersaglio ha un transform in hover che potrebbe restarne soffocato. */ animation: beibo-comparsa .7s cubic-bezier(.22, 1, .36, 1) both; }