Barva podle odrolování na stránce

Poměrně zajímavý efekt mají zprávy ve Facebook Messengeru:

Gradient na pozadí ve FB 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:

  1. obrázkové pozadí s barevným přechodem – lze vytvořit přímo v CSS pomocí gradientu: background-image: linear-gradient(#0D6AB7, #DA3F94)
  2. 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ý.

Samostatná živá ukázka

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.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Odkaz na kotvu a fixní menu

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

Poskakování kvůli scrollbaru

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

CSS mapa s popisky

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Komentáře