Barva podle odrolování na stránce
Jak pouze v CSS měnit pozadí elementu v závislosti na odscrollování na stránce.
Poměrně zajímavý efekt mají zprávy ve Facebook Messengeru:
V závislosti na umístění ve viewportu mají různou barvu. Tentýž element je dole červený a nahoře modrý. Během rolování mění svoji barvu.
Je až skoro překvapivé, jak jednoduché je takový efekt vyrobit. Stačí k tomu pouhé 2 vlastnosti:
- obrázkové pozadí s barevným přechodem – lze vytvořit přímo v CSS pomocí gradientu:
background-image: linear-gradient(#0D6AB7, #DA3F94) - fixní obrázkové pozadí – obrázkový gradient se zafixuje pomocí
background-attachment: fixed
Jako obrázek samozřejmě nemusí posloužit pouze CSS gradient, ale může jít o obrázek libovolný.
Využití
Kromě již zmíněných zpráv na Facebooku se podobný efekt může hodit pro zvýraznění čehokoliv během scrollování.
Ukázka zvýraznění nadpisů při příjezdu elementu do viewportu.
Řešení v JavaScriptu
V JS jde zjistit počet pixelů, o které je odrolováno, a podle toho s barvou libovolně manipulovat.
CSS řešení je ale podstatně jednodušší.
Výkon
V dávných dobách bývaly s v CSS fixovaným pozadím přes background-attachment: fixed značné výkonnostní problémy:
Na pomalejších počítačích (CPU pod 400, záleží hlavně na grafické kartě) způsobuje hodnota fixed pomalejší rolování, protože se to musí přepočítávat.
Yuhů, Background-attachment na JPW
Dnes už to takový problém není. Nicméně fakt, že se plocha s obrázkovým fixním pozadím musí neustále přepočítávat (překreslovat), platí stále. Je dobré si to při používání podobných efektů uvědomit.
Co si myslíte o tomto článku?
Diskuse
Související články
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.
CSS Stacking Context – jak funguje vrstvení elementů a z-index
Jak stacking context v CSS ovlivňuje z-index, co vytváří nový kontext vrstvení a jak řešit problémy s překrýváním elementů.
Kapitálky – CSS small caps a verzálky
Co jsou kapitálky (small caps), jak se liší od verzálek a jak je použít v CSS pomocí font-variant a text-transform.