Contenuto
- 01. Aggiungi il codice al tag del corpo della tua pagina
- 02. Stile del display
- 03. Visualizzazione del glitch
- 04. Tieni tutto
- 05. Esecuzione del glitch
- 06. Ritorno alla normalità
- Acquista ora il tuo biglietto per Generate New York
Un ottimo modo per attirare l'attenzione - e mantenerla - è creare un layout di sito web che mostri i tuoi talenti fin dall'inizio (un buon costruttore di siti web può aiutarti con la costruzione). Il sito dell'agenzia web ucraina Vintage è un ottimo esempio di questo, attirandoti nel suo portafoglio di design VR con una combinazione accattivante di un logo pulsante costruito con particelle di vetro e un bel po 'di glitch che si attiva al passaggio del mouse.
- Animazione web: nessun codice richiesto
Un semplice effetto glitch utilizzato con parsimonia può conferire al tuo sito un tocco di interesse visivo in più ed è sorprendentemente facile da implementare. Ecco come farlo.
Hai in mente un sito web complesso? Assicurati che il tuo web hosting sia all'altezza del compito. E mantieni i tuoi file di progettazione al sicuro nell'archivio cloud.
Scarica i file per questo tutorial.
01. Aggiungi il codice al tag del corpo della tua pagina
La creazione di un semplice effetto glitch può essere eseguita in tanti modi diversi. Qui lo faremo avendo una GIF animata sopra il testo, che verrà attivata e disattivata nel display. Per prima cosa, aggiungi questo codice al tag del corpo della tua pagina.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Stile del display
Il contenuto utilizzerà un carattere tipografico specifico di Google Fonts chiamato Work Sans. Prendi il collegamento da lì e posizionalo nella sezione della testa; quindi aggiungi il CSS ai tag di stile o a un file CSS separato. La pagina è nera con testo bianco e il titolare ha lo stile per il testo.
corpo {sfondo: # 000; famiglia di caratteri: "Work Sans", sans-serif; colore: #fff; } #holder {font-size: 6em; larghezza: 500 px; altezza: 300 px; margine: 0 auto; posizione: relativa; }
03. Visualizzazione del glitch
L'effetto glitch sarà un'immagine di sfondo posizionata direttamente sopra il testo. La parte importante qui è che viene reso invisibile riducendo l'opacità a zero in modo che non venga visualizzato finché l'utente non interagisce con il testo.
#glitch {position: absolute; in alto: 0; 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 body e crea un riferimento memorizzato nella cache al div "glitch" nel documento. Quindi una variabile denominata "over" viene impostata su false. Questo verrà attivato e disattivato quando l'utente si sposta sul testo.
var gl = document.getElementById ("glitch"); var over = false;
05. Esecuzione del glitch
La funzione glitch viene chiamata quando il mouse si sposta sul testo. Se il glitch non è in esecuzione, la visibilità del glitch viene attivata e viene disattivata dopo un secondo e mezzo.Puoi sperimentare con questo e utilizzare un numero casuale per renderlo più imprevedibile.
funzione glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Ritorno alla normalità
L'effetto glitch non dovrebbe rimanere attivo in quanto sarebbe troppo fastidioso per l'utente, ma come elemento interattivo funziona bene. Qui, il codice reimposta l'opacità a zero in modo che non sia visibile sopra la parte superiore del testo.
funzione normale () {gl.style.opacity = "0"; }
Acquista ora il tuo biglietto per Generate New York
L'evento di web design di tre giorni Generate New York è tornato. Tra il 25 e il 27 aprile 2018, i relatori principali includono Dan Mall di SuperFriendly, il consulente di animazione web Val Head, lo sviluppatore JavaScript completo Wes Bos e altro ancora. C'è anche un'intera giornata di workshop e preziose opportunità di networking: da non perdere. Ottieni ora il tuo biglietto Generate.
Questo articolo è stato originariamente pubblicato nel numero 270 della rivista di web design creativo Web Designer. Acquista il numero 270 qui o iscriviti a Web Designer qui.
