Obsah
- 01. Přidejte kód do tagu body na své stránce
- 02. Styling displeje
- 03. Zobrazení závady
- 04. Držte vše
- 05. Spuštění závady
- 06. Zpět k normálu
- Získejte lístek na Generate New York hned teď
Skvělý způsob, jak upoutat pozornost - a udržet si ji - je vytvořit rozložení webových stránek, které od nepaměti předvede váš talent (při sestavování vám může pomoci slušný tvůrce webových stránek). Skvělým příkladem toho je web ukrajinské webové agentury Vintage, který vás vtáhne do svého portfolia návrhů VR s poutavou kombinací pulzujícího loga vytvořeného ze skleněných částic a krásnou závadou, která se aktivuje při přechodu myší.
- Webová animace: Není vyžadován žádný kód
Jednoduchý efekt závady použitý šetrně může vašemu webu poskytnout trochu důležitého vizuálního zájmu navíc a jeho implementace je překvapivě snadná. Zde je návod, jak na to.
Máte na mysli složitý web? Ujistěte se, že váš webhosting splňuje daný úkol. Uložte své návrhové soubory v cloudovém úložišti.
Stáhněte si soubory pro tento tutoriál.
01. Přidejte kód do tagu body na své stránce
Vytvoření efektu jednoduché závady lze provést mnoha různými způsoby. Tady to uděláme tak, že v horní části textu bude animovaný GIF, který se bude na displeji zapínat a vypínat. Nejprve přidejte tento kód do značky těla vaší stránky.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Styling displeje
Obsah bude používat konkrétní písmo od společnosti Google Fonts nazvané Work Sans. Odtud popadněte odkaz a umístěte jej do sekce s hlavou; poté přidejte CSS do značek stylu nebo do samostatného souboru CSS. Stránka je černá s bílým textem a držitel je stylizovaný pro text.
body {pozadí: # 000; font-family: ‘Work Sans’, sans-serif; barva: #fff; } #holder {font-size: 6em; šířka: 500px; výška: 300px; okraj: 0 auto; pozice: relativní; }
03. Zobrazení závady
Efekt závady bude obrázek na pozadí, který je umístěn přímo nad horní část textu. Důležitou součástí je, že je neviditelný snížením neprůhlednosti na nulu, takže se nezobrazí, dokud uživatel s textem neinteraguje.
#glitch {pozice: absolutní; nahoře: 0; vlevo: 0; z-index: 10; šířka: 100%; výška: 100%; pozadí: url (glitch.gif); neprůhlednost: 0; }
04. Držte vše
Přidejte značky skriptu na konec části těla a vytvořte odkaz na mezipaměť div v dokumentu „glitch“. Pak je proměnná s názvem „over“ nastavena na false. To se zapne a vypne, když uživatel přejde přes text.
var gl = document.getElementById ("závada"); var over = false;
05. Spuštění závady
Funkce glitch se volá, když se myš pohybuje nad textem. Pokud závada nefunguje, viditelnost závady se zapne a po jedné a půl sekundě se vypne.Můžete s tím experimentovat a použít náhodné číslo, aby bylo více nepředvídatelné.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Zpět k normálu
Efekt závady by neměl zůstat aktivní, protože by byl pro uživatele příliš nepříjemný, ale jako interaktivní prvek funguje dobře. Zde kód resetuje neprůhlednost zpět na nulu, aby ji nebylo možné vidět v horní části textu.
funkce normal () {gl.style.opacity = "0"; }
Získejte lístek na Generate New York hned teď
Třídenní webdesignová akce Generate New York je zpět. Mezi hlavními řečníky, kteří se konají ve dnech 25. – 27. Dubna 2018, jsou Dan Mall společnosti SuperFriendly, konzultant webové animace Val Head, vývojář JavaScriptu s plným zásobníkem Wes Bos a další. K dispozici je také celý den workshopů a cenných příležitostí k vytváření sítí - nenechte si to ujít. Získejte lístek Generate hned teď.
Tento článek byl původně publikován v čísle 270 časopisu kreativního webdesignu Web Designer. Koupit číslo 270 zde nebo zde se přihlaste k odběru Web Designer.
