/* ========================================================================== VOLITELNÝ EFEKT: přebarvení pozadí při scrollu (zelená → bílá) -------------------------------------------------------------------------- Inspirace: vavruska.info. Čistě CSS scroll-driven animace, bez JavaScriptu. ZAPNUTÍ / VYPNUTÍ: třída `scroll-bg` na v index.html. Bez třídy (nebo bez tohoto souboru) má web výchozí vzhled se statickými pozadími sekcí. V prohlížečích bez podpory scroll-driven animací (@supports níže) se efekt neaplikuje a zůstává výchozí vzhled. Jak to funguje: sekce .why (Proč se pojistit) definuje view-timeline; obal .page ji vidí přes timeline-scope a animuje své pozadí ze zelené do bílé, když .why vjíždí do viewportu: začátek = 450 px poté, co horní hrana sekce překročí spodní okraj obrazovky (entry 450px), konec o dalších 500 px scrollu později (entry 950px), průběh ease-in-out. Pevná délka v px, aby přechod trval stejně na desktopu i mobilu. Hero a nabídka mají průhledné pozadí, zelenou dodává .page. Světlé texty v nabídce se ve stejném úseku přebarví na tmavé. Proč se animuje vlastní vlastnost --scroll-bg, a ne background-color přímo: Chrome si animaci background-color bere na kompozitor (CompositeBGColorAnimation) a po dojetí na konec ji při scrollu zpět nahoru už nepřehrává: vypočtený styl se vrací k zelené, ale vykreslené pozadí zůstane bílé (Safari je v pořádku). Animace registrované vlastní vlastnosti běží na hlavním vlákně a překresluje se správně oběma směry. Nezjednodušovat zpět na animaci background-color. ========================================================================== */ @property --scroll-bg { syntax: ''; inherits: false; initial-value: #003F38; /* = --c-green v app.css (initial-value nesmí použít var()) */ } @supports (animation-timeline: view()) { html.scroll-bg .page { --scroll-bg: var(--c-green); background-color: var(--scroll-bg); timeline-scope: --why-view; animation: scroll-bg-page ease-in-out both; animation-timeline: --why-view; animation-range: entry 450px entry 950px; } html.scroll-bg .hero, html.scroll-bg .offer, html.scroll-bg .why { background: transparent; } html.scroll-bg .why { view-timeline: --why-view block; } html.scroll-bg .jobs__title, html.scroll-bg .jobs__hint, html.scroll-bg .offer__note p { animation: scroll-bg-text linear both; animation-timeline: --why-view; animation-range: entry 450px entry 950px; } html.scroll-bg .jobs__hint, html.scroll-bg .offer__note .offer__note-small { animation-name: scroll-bg-text-small; } /* Nadpis „Jakou práci vykonáváte?“ je bílý, přepíná se stejně jako nadpis .why. */ html.scroll-bg .jobs__title { animation-name: scroll-bg-why-title; } /* Nadpis sekce .why vjíždí do obrazovky ještě na zelené, proto je do přepnutí bílý a pak tmavě zelený jako v základním stylu. */ html.scroll-bg .why__title { animation: scroll-bg-why-title linear both; animation-timeline: --why-view; animation-range: entry 450px entry 950px; } @keyframes scroll-bg-page { from { --scroll-bg: var(--c-green); } to { --scroll-bg: #FFFFFF; } } /* Text se nepřelévá plynule (uprostřed by splynul s pozadím), ale zůstává světlý do poloviny přechodu a pak se rychle přepne na tmavý. */ @keyframes scroll-bg-text { 0%, 50% { color: var(--c-mint-soft); } 54%, 100% { color: var(--c-green); } } @keyframes scroll-bg-text-small { 0%, 50% { color: var(--c-mint-muted); } 54%, 100% { color: var(--c-slate); } } @keyframes scroll-bg-why-title { 0%, 50% { color: #FFFFFF; } 54%, 100% { color: var(--c-green); } } }