/* ========================================================================== First Seafood — Reveal ========================================================================== Innehåll träder fram när det scrollas in i vyn. OPT-IN ------ Ingenting animeras av sig självt. Klassen sätts per modul i Beaver Builders Avancerat → CSS-klass: fs-reveal grunddos — intoning och ett kort lyft fs-reveal-mask mjuk maskkant som sveper vänster→höger, för rubriken fs-reveal-barn trappar innehållets barn i stället för modulen DOSERINGEN ÄR REGELN -------------------- Maskkanten ritar en hård kant som ögat följer. Ligger den på varje objekt tar rörelsen över sidan. Använd den på EN sak per sektion — rubriken. Se README.md. VÄRDENA ÄGS AV TEMAT -------------------- var(--fs-reveal-*) kommer ur child-temats tokens.css. Fallback-värdena efter kommatecknet gör att plugin:et fungerar utan temat, men ändra doseringen i tokens — inte här. Två sanningar för samma värde är precis det designsystemet ska förhindra. SKYDDSNÄT --------- Startläget slår in först när fått klassen fs-js. Utan JavaScript syns allt som vanligt, och tar scriptet aldrig kontakt plockas klassen bort igen efter tre sekunder. Sidan kan alltså aldrig bli tom. ========================================================================== */ /* -------------------------------------------------------------------------- GRUNDDOS -------------------------------------------------------------------------- */ .fs-js .fs-reveal { opacity: 0; transform: translateY( var( --fs-reveal-dist, 8px ) ); /* Intoningen ligger på plain ease och löper 15 % längre än förflyttningen. Det är det som gör dosen mjuk: hade de tagit slut samtidigt hade objektet landat på ett tydligt ögonblick. Nu tonar det färdigt strax efter att det slutat röra sig, och rörelsen har ingen skarp ankomst. */ transition: opacity calc( var( --fs-reveal-dur, 0.62s ) * 1.15 ) ease, transform var( --fs-reveal-dur, 0.62s ) var( --fs-reveal-ease, cubic-bezier(0.32, 0.72, 0.28, 1) ); /* Trappan. Måste stå EFTER kortformen ovan — annars nollställer den fördröjningen och syskonen spelar samtidigt. */ transition-delay: calc( var( --fs-reveal-i, 0 ) * var( --fs-reveal-stagger, 50ms ) ); } .fs-js .fs-reveal.fs-reveal--in { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- MASKKANT — för sektionsrubriken, en per sektion Kanten går vänster till höger, samma väg som texten läses. Den är en FJÄDRAD maskgradient, inte en clip-path. Skillnaden är hela karaktären: clip-path ritar en rakbladskant som ögat låser vid, medan gradienten låter kanten tona över en bit av rubriken. Mjukare, och utan att rörelsen tappar sin riktning. Konstruktionen: maskbilden är tre gånger så bred som elementet. Vid mask-position 100% ligger den genomskinliga tredjedelen över rubriken, vid 0% den täckande. Fjädern sitter mitt emellan och sveper förbi. Stoppen måste hålla sig innanför 33.333%–66.667% av bilden, annars är rubriken inte helt dold i början eller inte helt synlig på slutet. Felläget är dessutom snällare än clip-path: en webbläsare utan maskstöd ignorerar egenskaperna och visar rubriken, i stället för att klippa bort den. -------------------------------------------------------------------------- */ .fs-js .fs-reveal-mask { opacity: 0; transform: translateX( calc( var( --fs-reveal-dist, 8px ) * -0.75 ) ); --fsr-mask: linear-gradient( to right, #000 0, #000 calc( 50% - var( --fs-reveal-mask-fjader, 12% ) / 2 ), transparent calc( 50% + var( --fs-reveal-mask-fjader, 12% ) / 2 ), transparent 100% ); -webkit-mask-image: var( --fsr-mask ); mask-image: var( --fsr-mask ); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: opacity calc( var( --fs-reveal-mask-dur, 0.9s ) * 0.5 ) ease, transform var( --fs-reveal-mask-dur, 0.9s ) var( --fs-reveal-ease, cubic-bezier(0.32, 0.72, 0.28, 1) ), -webkit-mask-position var( --fs-reveal-mask-dur, 0.9s ) var( --fs-reveal-ease, cubic-bezier(0.32, 0.72, 0.28, 1) ), mask-position var( --fs-reveal-mask-dur, 0.9s ) var( --fs-reveal-ease, cubic-bezier(0.32, 0.72, 0.28, 1) ); transition-delay: calc( var( --fs-reveal-i, 0 ) * var( --fs-reveal-stagger, 50ms ) ); } .fs-js .fs-reveal-mask.fs-reveal--in { opacity: 1; transform: none; -webkit-mask-position: 0 0; mask-position: 0 0; } /* -------------------------------------------------------------------------- BARN — trappar innehållets barn i stället för modulen Behållaren döljs tills scriptet hunnit märka upp barnen. Utan det syns barnen ett ögonblick innan de göms igen, och den blinkningen är värre än ingen animation alls. Behållaren själv rör sig aldrig. -------------------------------------------------------------------------- */ .fs-js .fs-reveal-barn { opacity: 0; } .fs-js .fs-reveal-barn.fs-reveal-barn--klar { opacity: 1; transition: none; } /* -------------------------------------------------------------------------- RÖRELSEKÄNSLIGHET — WCAG 2.1 AA 2.3.3 Child-temats tokens.css nollar redan alla transitions globalt, men det räcker inte här: utan den här blocken skulle objekten hoppa fram i stället för att bara vara på plats. Vi tar därför bort startläget helt. Regeln upprepas dessutom här så plugin:et är tryggt även utan child-temat. -------------------------------------------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { .fs-js .fs-reveal, .fs-js .fs-reveal-mask, .fs-js .fs-reveal-barn { opacity: 1 !important; transform: none !important; transition: none !important; -webkit-mask-image: none !important; mask-image: none !important; } }