Přidejte efekt glitch na vaše webové stránky

Feb 1, 2026
jak

Skvělý způsob, jak upoutat pozornost - a udržet ji - je vytvořit rozložení webových stránek To představuje vaše talenty z off. Ukrajina webová agentura Vinobraní Místo je skvělým příkladem toho, že vás kreslí do jeho VR Design portfolio S očící kombinací pulzujícího loga postaveného ze skleněných částic a krásného kousku závady, která se aktivuje na Hover.

  • Webová animace: Není vyžadován žádný kód

Jednoduchý efekt glitch používá šetrně může dát vašim stránkám životně důležitý malý extra zraku, a je to překvapivě snadné realizovat. Tady je, jak to udělat.

Stáhněte si soubory pro tento tutoriál.

01. Přidat kód do značky těla vaší stránky

Vintage's glitch effect is easy to reproduce if you know its secret

Vintage je glitch efekt je snadno reprodukovat, pokud znáte jeho tajemství

Vytvoření jednoduchého účinku glitch lze provést tolik různých způsobů. Zde to uděláme tím, že máte animovaný gif přes horní část textu, který bude zapnutý a vypnutý na displeji. První nahoru, přidejte tento kód do značky těla vaší stránky. 

 & lt, div id = "držák" onmouseover = "glitch ()" & gt;
  & lt, div id = "závada" & gt; & lt; / div & gt;
  Web
  & lt; br & gt; PRODUKT-
  & lt; br & gt; ION
& lt; / div & gt;

02. Styling zobrazení

Obsah bude používat specifický typ písma z Google Fonts nazvaných Pracovní sans. Uchopte odkaz odtud a umístěte jej do sekce hlavy; Poté přidejte CSS do značek stylu nebo samostatný soubor CSS. Stránka je černá s bílým textem a držák je stylizován pro text. 

 tělo {
  Pozadí: # 000;
  Font-family: "Pracovní sans", sans-serif;
  Barva: #fff;
}
#holder {
  Velikost písma: 6em;
  šířka: 500px;
  Výška: 300px;
  marže: 0 auto;
  Pozice: Relativní;
}

03. Zobrazení závady

Efekt glitch bude obrazem na pozadí, který je umístěn přímo přes horní část textu. Důležitou součástí je, že je to neviditelná snížením opacity na nulu, takže se nezobrazí, dokud uživatel nebude spolupracovat s textem. 

 #ggitch {
  Pozice: absolutní;
  top: 0;
  vlevo: 0;
  Z-index: 10;
  šířka: 100%;
  výška: 100%;
  Pozadí: URL (glitch.gif);
  krytí: 0;
}

04. Držte všechno

Přidání značek skriptu na konec části těla a vytvořit odkaz na mezipaměti na "Glitch" Div v dokumentu. Pak je proměnná pojmenovaná 'přes' nastavena na hodnotu false. To bude zapnuta a vypnuta, když se uživatel přesune přes text. 

 var gl = dokument.getElementbyid ("glitch");
var přes = false;

05. Spuštění závady

Funkce závady se nazývá, když se myš přesune přes text. Pokud závada není spuštěna, je zapnuta viditelnost závady a po jednom a půl sekundu je vypnuta. Můžete s tím experimentovat a použít náhodné číslo, aby byl nepředvídatelnější. 

 Funkce Glitch () {
  Pokud (přes == false) {
  gl.style.opacity = "1";
  osískání (funkce () {
  normální();
  }, 1500);
  }
}

06. Zpět na normálnost

Efekt závady by neměl zůstat na tom, jak by to bylo příliš nepříjemné pro uživatele, ale jako interaktivní prvek funguje dobře. Zde kód resetuje krytí zpět na nulu, aby nedošlo k viditelné přes horní část textu. 

 Funkce normální () {
  gl.style.opacity = "0";
}

Získejte vstupenku na generování New Yorku

Třídenní událost webového designu Generovat New York je zpět. Probíhá mezi 25-27 dubnem 2018, titulní reproduktory zahrnují superfriendly's Dan Mall, web animace konzultant val hlavu, full-stack javascript vývojář wes bos a další. K dispozici je také celý den workshopů a cenných příležitostí sítě - Nenechte si ujít. Získejte svůj generátor .

Tento článek byl původně publikován v čísle 270 webového designéra Creative Web Design Magazine Web Designer. Koupit vydání 270 zde nebo Přihlásit se zde web designer zde .

Související články:

  • Vytvořit závěrku s těmito složitými fotografickými filtry
  • Animate SVG s JavaScriptem
  • 10 Skvělé animační zdroje CSS

jak - Nejoblíbenější články

Jak odstranit vrásky ve Photoshopu

jak Feb 1, 2026

(Image Credit: Jason Parnell-Brookes) Tento tutoriál vám ukáže, jak odstranit vrásky ve Photoshopu. Ale než za�..

Chiaroscuro Art: Průvodce krok za krokem

jak Feb 1, 2026

Dělat Chiaroscuro Art je o použití složení světla a stínu vytvořit hloubku a důležitější, náladu. V tomto tutoriálu se ponoříme do umělecké sféry temnoty a naučíme se vy..

Jak nakreslit asuka z evangelionu Neon Genesis

jak Feb 1, 2026

(Image Credit: Paul Kwon) Vytváření Charakter designy Pro bydlení je sen splněn, zejména při pr..

8 Zlatá pravidla mobilního designu

jak Feb 1, 2026

Mobilní design je relativně novým, ale důležitým protiplněním. Právě před deseti lety, projektování pro web znamenal..

Vytvořte interaktivní paralaxu

jak Feb 1, 2026

Paralaxační rolování už není zaručenou pozornost-grabber to bývalo, ale existují i ​​jiné způsoby použití technik paral..

4 Snadné kroky ke zlepšení vykreslení

jak Feb 1, 2026

Použití kopule světla je jedním z největších pokroků v CGI vytvoření v posledních několika desetiletích. Koupání s..

10 Zlatá pravidla pro reagující SVGS

jak Feb 1, 2026

Mnoho výhod SVG - včetně nekonečně škálovatelných vektorových obrazů, malých velikostí souborů a přímou integraci ..

Sestavte si vlastní rozhraní Maya

jak Feb 1, 2026

Moderní software může být nesmírně silný a všestranný. Maya se neliší, nabízí pole ohromujícího pole nástrojů, příkazů a možností, které vám pomohou dosáhnout požado..

Kategorie