4 moderní triky na pozadí vyzkoušet
Zdá se, že jako součást designu žijí zázemí ve stínu; nicméně to není úplně pravda. V dobách, kdy CSS začala dělat jen první kroky k dobytí světa, pozadí již převzalo roli hlavního dekorativního prvku webové stránky.
V dnešní době se situace drasticky nezměnila. Ve většině případů slouží jako primární vizuální hnací síla, která významným způsobem přispívá k obecnému tématu.
Tradiční fotografie a videa jsou první volby pro pozadí. Faktem je, že jsou prostě přeplněné hrdiny: každá jiná webová stránka pozdravuje on-line publikum buď na pozadí založené na obrazech, nebo na pozadí filmu. A to dělá Web (a vaše rozhraní zvláště) docela podobný, což má za následek očekávanou zkušenost uživatelů.
Jednou cestou je najít nová řešení využívající zcela nové techniky a hraní s CSS3, HTML5 a JavaScript. Ve skutečnosti je pro tyto možnosti zřejmý trend. Existují nejméně čtyři různé moderní dynamické zázemí, které se účastní soutěže, aby získaly své místo na slunci v těchto dnech.
Podívejme se na ně:
Animace částic
Animace částic je v současné době jednou z nejoblíbenějších možností. Zatížení webových stránek úspěšně přijalo toto elegantní řešení inspirované vesmírem. Funguje dobře v kombinaci s prostými barevnými plátny, ilustracemi, vektorovými kresbami a dokonce i fotografiemi.
Navíc animace se liší. Může to být svazek chaoticky pohybujících se bodů, které jsou rozptýleny po celé stránce, aby napodobovaly hvězdné nebo déšť hvězd, nebo řešení založené na souhvězdí, kde můžete spojit kruhy s tenkými liniemi. A to není všechno; někdy je spárována s účinky vyvolanými událostmi pohybu myší: v takovém případě můžete vypudit částečky, vytvořit víry z nich, připojit je ke kurzoru jako stezka apod.
Huub je příklad typické animace částic. Je vybaven elegantním pohybujícím se clusterem bodů, který dokonale funguje s tmavým zbarvením a mapou umístěnou na zádech. Použijte kurzor myši na zábavu.
Tip: Chcete-li se seznámit s pozadím dynamického záhlaví společnosti Huub, měli byste se podívat na projekt, který vytvořil Dominic Kolbe nazvaný myš paralaxa demo . Vypadá téměř stejně. Ale pokud potřebujete okamžité řešení, pak je k dispozici knihovna JavaScriptu od Vincenta Garreaua Particles.js je to, co hledáte.
Vlny částic
Zatímco v předchozím příkladu lze tento efekt dosáhnout s chytrými manipulacemi s HTML5 a CSS3 a špičkou JavaScriptu, je to geniální experiment s knihovnou Three.js. Se svými klenutými tvary a hladkými zvlněnými pohyby snadno připomíná jeden z malých přílivů. Vytváří pocit dýchacího plátna. Kurzor myši můžete otočit v různých směrech, a to jak horizontálně, tak i vertikálně.
StuurMen má jednoduchou, rafinovanou část "uvítání". Je to minimální, čisté a nádherné. Obsah nenápadně vstupuje do zorného pole, zatímco pulzující pozadí vytváří správnou náladu pro projekt.
Tip: Zde najdete originální skript společnosti ThreeJS a jeho úspěšné přizpůsobení Deathfangem s demo nazvaným tři plátna - částice - vlny .
Paralela myší myši
Vrstvená paralaxa je dalším rostoucím trendem. Spolu s animací částic může přeměnit nudné statické pozadí na kompozici s jemným 3D vnímáním. Skvělá věc je, že nemusíte vybírat své oblíbené snímky, stačí použít paralaxu, aby se trochu smradla.
Je to velmi užitečné, když potřebujete oživit titul, logotyp, surrealistickou scénu nebo ilustraci. Je také vhodný pro různé abstraktní animace. Spouští se standardní událost myši, která přidává další dimenzi, ale také umožňuje uživatelům hrát s prostředím.
Osobní portfolia společnosti Alexandre Rochet má vynikající splash stránku. Nejen, že chování zachytilo oko, ale také pohyb myší na paralaxu způsobuje posunutí písmen.
Tip: Existuje mnoho knihoven a životaschopných úryvků kódu pro generování paralaxy. Jeden z nejoblíbenějších je plugin vytvořený Matthewem Wagerfieldem Parallax.js . Nicméně, pokud ji potřebujete vidět v praxi, a to zejména u typografie, můžete si prohlédnout pero Frontnerd, které obsahuje jeho vzít na 3D paralaxu na myši .
WebGL experimenty
Experimenty WebGL jsou samozřejmě variantou pro sofistikované vytvrzené vývojáře a klienty s velkým rozpočtem. Mohou být brilantní, inspirativní a trochu pompézní. Stojí to za každý penny. Avšak v masti je vždy moucha. S velkou silou přichází velká zodpovědnost a s WebGL byste nikdy neměli zapomenout na množství zdrojů, které spotřebovává, a nedostatek plné kompatibility prohlížeče.
Solarin je všechno o nezapomenutelné a smysluplné uživatelské zkušenosti. Jedná se o experiment 3D WebGL, který je bohatý na četné vzrušující a inovativní funkce. Záhlaví pozadí je obrovská futuristická koule, která reaguje na kurzor myši a vytváří obrovský dojem.
Tip: Zatímco napodobovat to, co geniové v MediaMonks udělali, je na internetu zlověstně komplikované, můžete vždy najít výchozí bod, který vám dá rozmyslet. Zvažte WebGL API , a tento kód od Yoichi Kobayashi, který přišel s projektem nazvaným "Spletitá koule" .
Závěr
Zatímco využívání obrázků a videí je osvědčený a méně bolestivý způsob, jak překonat pozadí, existují ještě další slibné a experimentální možnosti, které mohou dosáhnout požadovaného výsledku. Odcházení od banalit je náročné a dokonce i náročné na peníze, ale tato opatření jsou oprávněná a dost rozumná.
Ať už se jedná o jednoduchou, ale elegantní animaci částic nebo pozoruhodný experiment WebGL, přivádí nový život do základního detailu rozhraní, což dává vašemu webu náskok.