/* ========================================================================== ALAKFA — HERO ART MOTION LAYER (névtér-előtag: af- = alakfa) Önálló, függőség nélküli mozgás- és fényréteg a hero SVG illusztrációhoz. Nem tud semmit a fáról: mindent CSS egyéni tulajdonságok hajtanak, amelyeket a JS képkockánként EGYETLEN elemre (a konténerre) ír ki. Ezért ugyanez a fájl bármelyik SVG-t mozgatja, ha a rétegek megkapják a szerződés szerinti osztályokat. 00 A szerződés 01 Regisztrált egyéni tulajdonságok 02 Konténer és vászon 03 Mélységi rétegek — egérparallax, késleltetett utánmozgás, újravilágítás 04 Fototropizmus — a korona a mutató felé dől 05 Szélmozgás és végigfutó széllökés 06 Formálás fénnyel — aljárnyék, peremfény, légtávlat 07 Napjárás — a görgetés a fényt mozgatja 08 Talaj — gereblyézett kavics, kettős árnyék 09 Levélsodrás 10 Belépő — a korona kinő, a törzs megrajzolódik 11 Ághalom-fókusz 12 Szemcse 13 Kapcsolók 14 Csökkentett mozgás / érintőképernyő / nyomtatás ========================================================================== */ /* --------------------------------------------------------------------- 00 A SZERZŐDÉS
← a JS ezt keresi … … Minden beágyazott csoportnak PONTOSAN EGY transform-felelőssége van: réteg = parallax, sway = szél, gust = széllökés, grow = belépő. Így soha nem írják felül egymást, és bármelyik külön kikapcsolható. Az elfordulási pontok (af-origin) viewBox-koordinátában vannak megadva, nem százalékban: a százalék a saját befoglaló dobozhoz igazodna, az pedig a gyerekek mozgásától elcsúszna, és a pad lassan „elvándorolna". --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 01 */ @property --af-px { syntax: ""; inherits: true; initial-value: 0; } @property --af-py { syntax: ""; inherits: true; initial-value: 0; } @property --af-lag-x { syntax: ""; inherits: true; initial-value: 0; } @property --af-lag-y { syntax: ""; inherits: true; initial-value: 0; } @property --af-gust { syntax: ""; inherits: true; initial-value: 0; } @property --af-gust-peak{ syntax: ""; inherits: true; initial-value: 0.5; } @property --af-gust-dir { syntax: ""; inherits: true; initial-value: 1; } @property --af-scroll { syntax: ""; inherits: true; initial-value: 0; } @property --af-amp { syntax: ""; inherits: true; initial-value: 22; } /* A viewBox századrésze. Minden fix geometria ennek a többszöröse, ezért az 560-as főoldali és a 420-as aloldali rajz arányosan mozog — a JS állítja be. */ @property --af-unit { syntax: ""; inherits: true; initial-value: 5.6; } @property --af-depth { syntax: ""; inherits: false; initial-value: 0; } @property --af-relight { syntax: ""; inherits: false; initial-value: 0; } @property --af-stagger { syntax: ""; inherits: false; initial-value: 0; } @property --af-gust-order { syntax: ""; inherits: false; initial-value: 0; } /* --------------------------------------------------------------------- 02 */ .af-art { --af-px: 0; --af-py: 0; --af-lag-x: 0; --af-lag-y: 0; --af-gust: 0; --af-scroll: 0; /* Az amplitúdó SVG felhasználói egységben értendő, mert a CSS transform az SVG-n belül a viewBox koordinátáiban mozog. A JS a viewBox szélességének ~4%-ára állítja, hogy minden méretnél egyforma legyen. */ --af-amp: 22; --af-unit: 5.6; position: relative; isolation: isolate; } .af-art__svg { width: 100%; height: 100%; display: block; overflow: visible; } .af-art.is-af-active .af-layer { will-change: transform; } /* --------------------------------------------------------------------- 03 MÉLYSÉGI RÉTEGEK Két bemenet adódik össze ugyanabban a képletben: · az egér — a réteg mélysége arányában (ez a térérzet), · a napjárás — csak azokon a rétegeken, amiknek van af-relight értéke. Ez a padok fénypöttye: ahogy a nap átvonul, a fénypötty átcsúszik a pad másik oldalára. A vízszintes kitérés a teljes amplitúdó, a függőleges ennek ~62%-a: a szem a vízszintes parallaxot érzi térnek, a függőlegeset könnyen „ugrálásnak" olvassa. */ .af-layer { transform: translate( calc((var(--af-px) * var(--af-depth) * var(--af-amp) + (var(--af-scroll) - 0.3) * var(--af-relight)) * 1px), calc(var(--af-py) * var(--af-depth) * var(--af-amp) * 0.62px) ); } /* Utánmozgás: a legkülső elemek — a lebegő levelek — egy lágyabb rugóról mennek, ezért egy hajszállal lemaradnak a koronától. Ettől lesz a mozgás láncszerű ahelyett, hogy minden egyszerre indulna és állna meg. */ .af-layer--lag { transform: translate( calc(var(--af-lag-x) * var(--af-depth) * var(--af-amp) * 1px), calc(var(--af-lag-y) * var(--af-depth) * var(--af-amp) * 0.62px) ); } /* --------------------------------------------------------------------- 04 FOTOTROPIZMUS A korona a mutató felé dől. Ez nem trükk, hanem következetes: a mutató viszi magával a fényfoltot, a növény pedig a fény felé fordul. A dőlés szándékosan kicsi — 1,4 fok —, mert nem billenésnek kell látszania, hanem figyelemnek. A forgáspont a törzs töve. */ .af-canopy { transform-box: view-box; transform-origin: var(--af-pivot, 50% 100%); transform: rotate(calc(var(--af-px) * 1.4deg)); } /* --------------------------------------------------------------------- 05 SZÉLMOZGÁS ÉS SZÉLLÖKÉS Az alaplengés folyamatos, fáziseltolt, és egér nélkül is fut (mobilon ez az egyik életben tartó mozgás). A negatív animation-delay a ciklus közepén indítja az elemet, így minden ághalom máshol tart. */ .af-sway { transform-box: view-box; transform-origin: var(--af-origin, 272px 470px); animation: afSway var(--af-sway-dur, 7.5s) ease-in-out infinite alternate; animation-delay: calc(var(--af-phase, 0) * -14s); } @keyframes afSway { from { transform: rotate(-0.55deg) translateY(0); } to { transform: rotate(0.6deg) translateY(calc(var(--af-unit) * -0.54px)); } } .af-sway--trunk { --af-sway-dur: 11s; animation-name: afSwayTrunk; } @keyframes afSwayTrunk { from { transform: rotate(-0.18deg); } to { transform: rotate(0.2deg); } } /* A széllökés VÉGIGFUT a fán: minden ághalom a saját sorszáma szerint késleltetve indul, balról jobbra. Ha egyszerre dőlne mind, kapcsolónak látszana; így szélrohamnak. A JS csak elindítja — az ütemezés itt van. */ .af-gust { transform-box: view-box; transform-origin: var(--af-origin, 272px 470px); } .af-art.is-af-gust .af-gust { animation: afGustWave 1020ms cubic-bezier(0.33, 0, 0.2, 1) 1; animation-delay: calc(var(--af-gust-order, 0) * 62ms); } @keyframes afGustWave { 0% { transform: rotate(0deg); } 26% { transform: rotate(calc(var(--af-gust-peak) * var(--af-gust-dir) * 2.1deg)); } 58% { transform: rotate(calc(var(--af-gust-peak) * var(--af-gust-dir) * -0.85deg)); } 100% { transform: rotate(0deg); } } /* --------------------------------------------------------------------- 06 FORMÁLÁS FÉNNYEL Eddig a fény a rajz FÖLÖTT úszott. Ez a két réteg formálja is: minden ághalom alsó pereme alá egy sötét sarló kerül, a nap felőli felső élére egy világos ív. Mindkettő a pad alakjára van vágva, tehát nem külön megrajzolt árnyék, hanem valódi megvilágítás — és a napjárással mozdul. Kettesben adják a gömbölyűséget: az egyik lefelé zárja a formát, a másik fölfelé kinyitja. */ .af-us, .af-rim { transform-box: fill-box; transform-origin: center; pointer-events: none; } .af-us { opacity: calc(0.82 + var(--af-scroll) * 0.18); transform: translate( calc(((0.35 - var(--af-scroll)) * 5.4 - var(--af-px) * 1.6) * var(--af-unit) * 1px), calc(var(--af-scroll) * 1.07 * var(--af-unit) * 1px)) scaleY(calc(1 + var(--af-scroll) * 0.2)); } .af-rim { opacity: calc(0.62 + var(--af-scroll) * 0.26); transform: translate( calc(((var(--af-scroll) - 0.35) * 6.8 + var(--af-px) * 2.0) * var(--af-unit) * 1px), calc(var(--af-scroll) * 0.71 * var(--af-unit) * 1px)); } /* Légtávlat: ami hátrébb van, azt több levegő takarja — halványabb, kékesebb, lágyabb. A szem ezt távolságként olvassa. */ .af-haze { fill: #E9EFE9; pointer-events: none; } .af-rings { filter: blur(0.8px); opacity: calc(0.8 - var(--af-scroll) * 0.32); } /* --------------------------------------------------------------------- 07 NAPJÁRÁS — a görgetés nem a vásznat mozgatja, hanem a fényt Egyetlen érték (af-scroll, 0…1) hajtja: a nap balról jobbra átvonul és gyorsulva ereszkedik, a fény felmelegszik, az árnyék átfordul. A fa a helyén marad — napóraként viselkedik. A nap és a glóriája a rajzban a LOMB MÖGÖTT van, ezért az ághalmok átvonulás közben kitakarják, és a fény előbukkan az ágak között. */ .af-sun, .af-warm { mix-blend-mode: soft-light; pointer-events: none; transform-box: fill-box; transform-origin: center; } .af-sun { transform: translate( calc((var(--af-px) * 10.4 + var(--af-scroll) * 53.6 - 21.4) * var(--af-unit) * 1px), calc((var(--af-py) * 7.9 + var(--af-scroll) * var(--af-scroll) * 27.9) * var(--af-unit) * 1px) ); } /* A lemenő nap glóriája együtt utazik a nappal. Egy teljes képmezős meleg réteg nem naplementének látszana, hanem bézs szűrőnek a hero hátterén. */ .af-warm { opacity: calc(var(--af-scroll) * var(--af-scroll) * 0.6); transform: translate( calc((var(--af-px) * 7.9 + var(--af-scroll) * 53.6 - 21.4) * var(--af-unit) * 1px), calc((var(--af-py) * 6.1 + var(--af-scroll) * var(--af-scroll) * 33.2) * var(--af-unit) * 1px) ); } /* Háttérfény: a mutatóval ellentétesen mozdul, ettől kerül a fa elé a tér. */ .af-glow { transform-box: fill-box; transform-origin: center; transform: translate(calc(var(--af-px) * -6.1 * var(--af-unit) * 1px), calc(var(--af-py) * -4.6 * var(--af-unit) * 1px)); animation: afGlowPulse 12s ease-in-out infinite alternate; } @keyframes afGlowPulse { from { opacity: 0.62; } to { opacity: 0.92; } } /* Melegedő zöldek: alkonyatkor ne csak a glória sárguljon, hanem maga a lomb is csússzon a meleg felé. Ha a böngésző nem ismeri a color-mix()-et, a deklaráció érvénytelen, és marad az eredeti szín — nincs törés. */ [data-warm] { stop-color: color-mix(in oklab, var(--base), #C68A42 calc(var(--af-scroll) * 25%)); } [data-warm-fill] { fill: color-mix(in oklab, var(--base), #C68A42 calc(var(--af-scroll) * 22%)); } [data-warm-stroke] { stroke: color-mix(in oklab, var(--base), #7A5A2A calc(var(--af-scroll) * 16%)); } /* --------------------------------------------------------------------- 08 TALAJ Gereblyézett kavics: koncentrikus barázdák a törzs körül — a japánkert legbeszédesebb eleme. Ahogy a nap lejjebb ereszkedik, a súroló fény kirajzolja őket, ezért a kontrasztjuk a napjárással nő. Kettős árnyék: egy szoros, sötét kontaktárnyék a tő alatt, ami NEM mozdul — ez ragasztja a fát a talajhoz —, és a hosszú vetett árnyék, ami a nappal fordul. A vetett árnyék az ághalmok formáit követi, ezért a lombárnyék játéka külön munka nélkül megjelenik a kavicson. */ .af-rake { opacity: calc(0.24 + var(--af-scroll) * 0.32); } .af-contact { opacity: 0.26; } .af-cast { transform-box: view-box; transform-origin: 272px 476px; opacity: calc(0.17 - var(--af-scroll) * 0.055); transform: translateX(calc((0.34 - var(--af-scroll)) * 26.8 * var(--af-unit) * 1px)) scaleX(calc(1 + var(--af-scroll) * var(--af-scroll) * 0.95)) scaleY(calc(1 - var(--af-scroll) * 0.18)); } /* --------------------------------------------------------------------- 09 */ .af-leaf { transform-box: fill-box; transform-origin: center; animation: afLeafFloat var(--af-leaf-dur, 13s) ease-in-out infinite alternate; animation-delay: calc(var(--af-phase, 0) * -20s); } @keyframes afLeafFloat { from { transform: translate(0, 0) rotate(-7deg); } to { transform: translate(calc(var(--af-unit) * 1.07px), calc(var(--af-unit) * -2.14px)) rotate(9deg); } } .af-leaf-drift { transform-box: fill-box; transform-origin: center; transform: translateY(calc(var(--af-scroll) * var(--af-leaf-fall, 40) * 1px)) rotate(calc(var(--af-scroll) * var(--af-leaf-spin, 24) * 1deg)); opacity: calc(1 - var(--af-scroll) * 0.45); } /* --------------------------------------------------------------------- 10 BELÉPŐ A korona nem beúszik, hanem KINŐ: minden ághalom a saját ágcsatlakozásából nyílik ki, alulról fölfelé lépcsőzve, közben a törzs alulról megrajzolódik. Ez OSZTÁLLYAL indított animáció, nem egy változó átmenete. Az átmenet csapda volt: a rajz a HTML-ben már ott van, tehát az első stílusszámítás a végállapottal fut le, és mire a JS nullázza az indulóértéket, az átmenet már csak visszasimít rá — a belépő gyakorlatilag sosem látszik. Az animáció viszont mindig az elejéről indul, amikor az osztály felkerül. A `backwards` kitöltés kell a lépcsőzéshez: a késleltetés alatt az elem a kezdőállapotot tartja, nem villan fel előbb a végállapotban. */ .af-grow { transform-box: view-box; transform-origin: var(--af-origin, 272px 470px); } .af-art.is-af-enter .af-art__svg { animation: afFadeIn 620ms ease-out backwards; } .af-art.is-af-enter .af-grow { animation: afGrowIn 760ms cubic-bezier(0.22, 0.9, 0.3, 1) backwards; animation-delay: calc(0.14s + var(--af-stagger, 0) * 0.095s); } .af-art.is-af-enter .af-trunk path { animation: afDrawIn 880ms cubic-bezier(0.3, 0.8, 0.3, 1) backwards; } @keyframes afFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes afGrowIn { from { transform: scale(0.16); } to { transform: scale(1); } } @keyframes afDrawIn { from { stroke-dashoffset: 1px; } to { stroke-dashoffset: 0px; } } /* pathLength="1" miatt a rajz hossza mindig 1 egység, tehát a JS-nek nem kell megmérnie a görbéket. A törzs alulról indul, az ágak a törzstől kifelé. Alaphelyzetben az eltolás 0, vagyis a vonal teljesen ki van rajzolva — JS nélkül is ép a rajz. */ .af-trunk path { stroke-dasharray: 1px; stroke-dashoffset: 0; } /* --------------------------------------------------------------------- 11 */ @media (hover: hover) and (pointer: fine) { .af-pad-group { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.45s ease; transform-box: view-box; transform-origin: var(--af-origin, 272px 470px); } .af-art[data-af-focus="on"] .af-pad-group:hover { transform: translateY(calc(var(--af-unit) * -0.9px)) scale(1.02); filter: brightness(1.07) saturate(1.05); } } /* --------------------------------------------------------------------- 12 SZEMCSE Nagyon halk, egyenletes zaj az egész kompozíció fölött: a legolcsóbb prémium-jel, amit vektoros grafikán el lehet érni — összefogja a lapos felületeket, és nyomtatott, nem képernyős karaktert ad. Statikus, tehát egyszer renderelődik; lágy maszkkal fut ki, hogy ne látszódjon a pereme. */ .af-grain { mix-blend-mode: overlay; opacity: 0.075; pointer-events: none; } /* --------------------------------------------------------------------- 13 KAPCSOLÓK — ezek lesznek az Elementor widget kapcsolói is. A stíluslap !important-ja felülírja a JS soron belüli értékét. */ .af-art--no-parallax { --af-amp: 0 !important; --af-lag-x: 0 !important; --af-lag-y: 0 !important; } .af-art--no-parallax .af-canopy { transform: none; } .af-art--no-sun { --af-scroll: 0 !important; } .af-art--no-sun .af-warm { display: none; } .af-art--no-wind .af-sway, .af-art--no-wind .af-leaf, .af-art--no-wind .af-glow { animation: none !important; } .af-art--no-wind.is-af-gust .af-gust { animation: none !important; } .af-art--no-shading .af-us, .af-art--no-shading .af-rim, .af-art--no-shading .af-haze { display: none; } .af-art--no-leaves .af-leaf-drift { display: none; } .af-art--no-grain .af-grain { display: none; } /* --------------------------------------------------------------------- 14 HOZZÁFÉRHETŐSÉG ÉS TARTALÉKOK Fontos: a parallax NEM animáció, hanem transform egyéni tulajdonságokból, ezért a szokásos `animation-duration: 0.01ms` trükk NEM állítja meg. A JS ilyenkor le sem köti az eseményeket, és ez az osztály nullázza a maradékot. A szemcse marad: az nem mozgás. */ .af-art--still, .af-art--still * { --af-px: 0 !important; --af-py: 0 !important; --af-lag-x: 0 !important; --af-lag-y: 0 !important; --af-gust: 0 !important; --af-scroll: 0 !important; } .af-art--still .af-sway, .af-art--still .af-leaf, .af-art--still .af-glow, .af-art--still .af-gust { animation: none !important; } .af-art--still .af-canopy { transform: none !important; } @media (prefers-reduced-motion: reduce) { .af-sway, .af-leaf, .af-glow, .af-gust { animation: none !important; } } @media print { .af-art { --af-px: 0; --af-py: 0; --af-scroll: 0; } .af-sway, .af-leaf, .af-glow { animation: none !important; } .af-grain { display: none; } }