Obsah
- 01. Pridajte kód do značky tela na svojej stránke
- 02. Štýlovanie displeja
- 03. Zobrazenie závady
- 04. Držte všetko
- 05. Spustenie závady
- 06. Späť k normálu
- Získajte lístok na Generate New York už teraz
Skvelým spôsobom, ako upútať pozornosť - a neustále sa ho držať - je vytvorenie rozloženia webových stránok, ktoré od začiatku predvedie váš talent (so zostavením vám môže pomôcť slušný tvorca webových stránok). Ukrajinská webová agentúra Vintage’s je toho skvelým príkladom a priťahuje vás do svojho portfólia dizajnov VR pomocou pútavej kombinácie pulzujúceho loga vyrobeného zo sklenených častíc a krásnej chyby, ktorá sa aktivuje pri prechode kurzorom myši.
- Webová animácia: Nie je potrebný žiadny kód
Efekt jednoduchej závady, ktorý sa používa šetrne, môže vášmu webu dodať trochu dôležitého vizuálneho záujmu a jeho implementácia je prekvapivo ľahká. Tu je postup, ako to urobiť.
Máte na mysli komplexný web? Uistite sa, že váš webhosting plní túto úlohu. A udržujte svoje návrhové súbory v bezpečí v cloudovom úložisku.
Stiahnite si súbory pre tento návod.
01. Pridajte kód do značky tela na svojej stránke
Vytvorenie efektu jednoduchej závady je možné vykonať rôznymi spôsobmi. Tu to urobíme tak, že budeme mať nad hornou časťou textu animovaný GIF, ktorý sa bude na displeji zapínať a vypínať. Najskôr pridajte tento kód do značky tela na svojej stránke.
div id = "držiteľ" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUKT - br> ION / div>
02. Štýlovanie displeja
Obsah bude používať špecifické písmo od spoločnosti Google Fonts s názvom Work Sans. Chyťte odkaz odtiaľ a umiestnite ho do svojej hlavy; potom pridajte CSS buď do značiek štýlov, alebo do samostatného súboru CSS. Strana je čierna s bielym textom a držiak je štylizovaný pre tento text.
telo {pozadie: # 000; font-family: ‘Work Sans’, sans-serif; farba: #fff; } #holder {font-size: 6em; šírka: 500px; výška: 300px; okraj: 0 auto; poloha: relatívna; }
03. Zobrazenie závady
Efektom závady bude obrázok na pozadí, ktorý je umiestnený priamo nad hornou časťou textu. Dôležitou časťou je, že je neviditeľný znížením nepriehľadnosti na nulu, aby sa nezobrazoval, kým používateľ neinteraguje s textom.
#glitch {pozícia: absolútna; hore: 0; vľavo: 0; z-index: 10; šírka: 100%; výška: 100%; pozadie: url (glitch.gif); nepriehľadnosť: 0; }
04. Držte všetko
Pridajte značky skriptu na koniec časti tela a vytvorte odkaz na medzipamäť na časť „glitch“ v dokumente. Potom je premenná s názvom „over“ nastavená na hodnotu false. Toto sa zapne a vypne, keď používateľ prejde textom.
var gl = document.getElementById ("závada"); var over = false;
05. Spustenie závady
Funkcia glitch sa volá, keď sa myš pohybuje po texte. Ak porucha nefunguje, viditeľnosť poruchy sa zapne a po jeden a pol sekunde sa vypne.Môžete s tým experimentovať a použiť náhodné číslo, aby bola nepredvídateľnejšia.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Späť k normálu
Efekt závady by nemal zostať zapnutý, pretože by bol pre používateľa príliš nepríjemný, ale ako interaktívny prvok funguje dobre. Tu kód resetuje nepriehľadnosť späť na nulu, aby ju nebolo možné vidieť v hornej časti textu.
funkcia normal () {gl.style.opacity = "0"; }
Získajte lístok na Generate New York už teraz
Trojdňové podujatie web designu Generate New York je späť. Medzi hlavnými rečníkmi, ktorí sa konajú medzi 25. a 27. aprílom 2018, sú Dan Mall zo SuperFriendly, konzultant pre webové animácie Val Head, vývojár JavaScriptu s plným zásobníkom Wes Bos a ďalší. K dispozícii je tiež celý deň workshopov a cenných príležitostí na vytváranie sietí - nenechajte si to ujsť. Získajte lístok Generate hneď.
Tento článok bol pôvodne publikovaný v čísle 270 kreatívneho časopisu Web Design Web Designer. Kúpte si číslo 270 tu alebo prihlásiť sa na odber webového dizajnéra tu.
