v moderním webdesignu pozadí jsou velké (doslova i obrazně). S příchodem HD (a nyní 4K) displeje, návrháři vytvářejí pozadí, které zabírají spoustu obrazovky nemovitostí. Proč? Protože vytvářejí neuvěřitelný vizuální dopad a pomáhají vyprávět příběh.

ale pozadí je mnohem víc než pouhé házení fotografie nebo textury do velkého prostoru. Kombinace CSS a občasné trochu JavaScriptu moc vytvoření některých úžasných speciálních efektů.

pojďme prozkoumat některé z jedinečných způsobů, kterými designéři okořenili pozadí. Zahrneme také pero pro každou techniku, abyste mohli přesně vidět, jak fungují.

CSS Blend Mode Color Change

Co dělá tento efekt pozadí tak cool je, že se zdá, že pevný prvek nahoře mění barvu, jak se uživatel posouvá. Použití vlastnosti CSS mix-blend-mode umožňuje změnu odstínu, která závisí na obsahu pozadí.

animace posouvání

tato technika připomíná videohry s bočním posouváním minulosti a obsahuje dva odlišné obrázky – každý rolování v opačném směru. Je to provedeno pomocí CSS transform a některých JS.

zkosené

zkosené pozadí jsou jedním z nejžhavějších trendů ve webdesignu. Je to efekt, který byl neuvěřitelně snadné implementovat v tiskovém designu a bolest dělat na webu – až dosud. Toto čisté řešení HTML / CSS z něj dělá cinch.

pohyblivé obrázky

pomocí poměrně jednoduchého bitu CSS umožňuje toto pozadí hladký přechod mezi více obrázky. Je to mnohem lehčí jezdec než tradiční JavaScript.

animovaný Gradient

Pokud není provedeno opatrně, animované pozadí může odvrátit pozornost od jakéhokoli obsahu, který sedí nad ním. Tento příklad animovaného přechodu je pěkný, protože je to jemnější efekt. Pomocí JavaScriptu můžete definovat barvy přechodu tak, aby odpovídaly vaší paletě.

Rozostření na Scroll

Tato technika by mohla být docela užitečné pro ty časy, kdy opravdu chcete návštěvníků zaměřit se na obrázek na pozadí (jako je záhlaví zprávy článek) a pak umožňují snadné čtení textu přes vrchol. Trochu jQuery změní background-size vlastnost při rolování vytvořit efekt.

Fade-In Hero Image s Overlay

v tomto příkladu se děje několik věcí. Za prvé, obrázek hrdiny v plné šířce má nahoře přidáno barevné překrytí, které vytváří jiný odstín. Poté je implementována animace vyblednutí, která obraz vizuálně hladce představí. Nakonec se do mixu přidá rolovací efekt ve stylu paralaxy. Výsledkem je velmi moderní vzhled, který používá relativně málo kódu(a žádný JS).

pozadí Zoom a Pan

zde je efekt, který vidíme docela dost v poslední době. Jak se uživatel pohybuje nad panelem, obrázek na pozadí se přiblíží a posouvá spolu s pohyby kurzoru. Je to snadný způsob, jak přidat nějakou interaktivitu a udržet zájem uživatelů.

Reveal on Hover

tento příklad ukazuje rozdělenou obrazovku, kde je pozadí odhaleno na základě polohy myši uživatele. Skvělé pro srovnání, jako „před“ a “ po “ výstřely.

Změna barvy na rolování

někdy zapomínáme, jak silné může být použití jednoduchých plných barev. Zde vidíme dopad, který může mít, když se barvy pozadí mění na základě polohy posouvání. Toto lehké řešení může být stejně vizuálně efektivní jako těžké snímky.

pozadí v popředí

pozadí již nejsou jen prostředkem k rámování obsahu – nyní jsou často součástí samotného obsahu. S tolika zajímavými způsoby, jak je využít, stojí za to experimentovat s různými technikami pozadí a zjistit, jak mohou zlepšit uživatelský zážitek z VAŠEHO dalšího projektu.