Aggiungi un effetto glitch al tuo sito web

Sep 13, 2025
Come si fa

Un ottimo modo per attirare l'attenzione - e continua a tenerlo - è creare un Layout del sito web Questo mostra i tuoi talenti dal largo. Agenzia Web Ucraina Vintage ▾ Il sito è un grande esempio di questo, ti disegna nella sua VR Portfolio di progettazione Con una combinazione accattivante di un logo pulsante costruito da particelle di vetro e un bel po 'di glitch che si attiva su Hover.

  • Animazione Web: nessun codice richiesto

Un semplice effetto glitch usato con parsimonia può dare al tuo sito un po 'di interesse vitale di interesse visivo, ed è sorprendentemente facile da implementare. Ecco come farlo.

Scarica i file. per questo tutorial.

01. Aggiungi codice al tag corporeo della tua pagina

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

L'effetto glitch dell'annata è facile da riprodurre se conosci il suo segreto

Creare un semplice effetto glitch può essere fatto in tanti modi diversi. Qui lo faremo con una GIF animata sopra la parte superiore del testo, che verrà attivata e spenta sul display. Innanzitutto, aggiungi questo codice al tag del corpo della tua pagina. 

 & lt; div id = "detentore" onmouseover = "glitch ()" & gt;
  & lt; div id = "glitch" & gt; & lt; / div & gt;
  RAGNATELA
  & lt; BR & GT; PRODOTTO-
  & lt; BR & GT; Ion.
& lt; / div & gt;

02. Stiling il display

Il contenuto utilizzerà un tipografo specifico da Google Fonts chiamato Work SANS. Prendi il link da lì e metterlo nella sezione della tua testa; Quindi aggiungere il CSS ai tag di stile o a un file CSS separato. La pagina è resa nera con testo bianco e il supporto è in stile per il testo. 

 Body {
  Sfondo: # 000;
  Fammon-family: "Work sans", sans-serif;
  Colore: #FFFF;
}
# Kolder {
  Dimensione del carattere: 6Em;
  Larghezza: 500PX;
  Altezza: 300 px;
  Margine: 0 Auto;
  Posizione: relativo;
}

03. Visualizzazione del problema

L'effetto glitch sarà un'immagine di sfondo posizionata direttamente sopra la parte superiore del testo. La parte importante qui è che è resa invisibile riducendo l'opacità allo zero in modo che non si presentasse fino a quando l'utente interagisce con il testo. 

 #glitch {
  Posizione: assoluto;
  Top: 0;
  a sinistra: 0;
  z-index: 10;
  Larghezza: 100%;
  Altezza: 100%;
  Sfondo: URL (glitch.gif);
  Opacità: 0;
}

04. Tieni tutto

Aggiungi tag script alla fine della sezione del corpo e creare un riferimento memorizzato nella cache al div 'glitch' nel documento. Quindi una variabile denominata "Over" è impostata su FALSE. Questo sarà acceso e spento quando l'utente si muove sul testo. 

 VAR GL = Document.getElementbyID ("Itch");
var over = false;

05. Running the Itch

La funzione glitch viene chiamata quando il mouse si sposta sul testo. Se il problema tecnico non è in esecuzione, la visibilità dei problemi è accesa e viene disattivata dopo un secondo e mezzo. Puoi sperimentare questo e utilizzare un numero casuale per renderlo più imprevedibile. 

 Function Itch () {
  se (oltre == falso) {
  Gl.Style.opacity = "1";
  Settimimeout (funzione () {
  normale();
  }, 1500);
  }
}

06. Torna alla normalità

L'effetto glitch non dovrebbe rimanere in quanto sarebbe troppo fastidioso per l'utente, ma come elemento interattivo funziona bene. Qui, il codice ripristina l'opacità a zero in modo che non sia visibile sopra la parte superiore del testo. 

 Funzione normale () {
  Gl.Style.opacity = "0";
}

Ottieni il tuo biglietto per generare New York ora

Evento di progettazione web di tre giorni Genera New York è tornato. Situato tra il 25-27 aprile 2018, gli altoparlanti del titolo includono il Dan Mall Superfriendly, il consulente del web dell'animazione della Val Val, sviluppatore JavaScript completo WES BOS e altro ancora. C'è anche una giornata intera di workshop e preziose opportunità di networking - da non perdere. Ottieni il tuo biglietto generato ora .

Questo articolo è stato originariamente pubblicato in emissione 270 di Web Designer di Web Design Web Design. Comprare il problema 270 qui o Iscriviti al web designer qui .

Articoli Correlati:

  • Crea glitch art con questi intricati filtri fotografici
  • Animare svg con javascript
  • 10 Great CSS Animation Risorse

Come si fa - Articoli più popolari

Lino Printmaking: un'introduzione

Come si fa Sep 13, 2025

(Immagine di immagine: Meg Buick) Lino Printmaking è un metodo di stampa di sollievo, che comporta la scultura di un..

Come costruire un blog con Jekyll

Come si fa Sep 13, 2025

(Credito immagine: rete) Questo tutorial è per le persone che hanno sentito parlare dei generatori di siti statici e..

10 modi per costruire migliori ambienti mondiali 3D

Come si fa Sep 13, 2025

[Immagine: Albert Valls Punsich] Se vuoi rimanere in cima al tuo gioco come artista 3D, è importante risuonare le tu..

Come risolvere un Design Tricky Brief

Come si fa Sep 13, 2025

[Immagine: Jack Renwick Studio] Se qualcuno sa come gestire un breve breve breve, sono i designer intelligenti di Jac..

Controllo della versione principale per team remoti

Come si fa Sep 13, 2025

Lavorare da remoto è diventato molto più comune nello sviluppo web negli ultimi anni. Prima del controllo della versione, lavor..

Come disegnare un grande gatto con pastelli

Come si fa Sep 13, 2025

La morbidezza e la luminosità dei bastoncini pastello li rendono la scelta ideale per gli sfondi nella mia Disegni paste..

Master lo strumento del coltello

Come si fa Sep 13, 2025

A volte tornare alle basi è vitale per stare in cima al tuo gioco, come rinnovare le tue abilità può rinvigorire la tua passio..

Come prototipare un'App mobile con Adobe XD

Come si fa Sep 13, 2025

Questo tutorial, mostrando come fare un prototipo di app mobile in Adobe XD, è stato messo insieme usando ..

Categorie