Content
- 01. Afegiu codi a l'etiqueta del cos de la vostra pàgina
- 02. Estil de la pantalla
- 03. Visualització del problema
- 04. Aguanta-ho tot
- 05. Execució del problema
- 06. Tornar a la normalitat
- Aconseguiu el vostre bitllet per a Generate New York ara
Una manera fantàstica de cridar l’atenció i mantenir-la és crear un disseny de lloc web que mostri els vostres talents des de fora (un constructor de llocs web decent us pot ajudar amb la construcció). El lloc de l’agència web d’Ucraïna, Vintage, n’és un excel·lent exemple, que us atrau a la seva cartera de disseny de realitat virtual amb una cridanera combinació d’un logotip palpitant construït a partir de partícules de vidre i una mica de problema que s’activa al volar.
- Animació web: no cal cap codi
Un simple efecte de fallada que s’utilitza amb moderació pot proporcionar al vostre lloc un interès visual addicional i és sorprenentment fàcil d’implementar. A continuació s’explica com fer-ho.
Teniu present un lloc web complex? Assegureu-vos que l’allotjament web estigui a l’alçada de la tasca. I mantingueu els fitxers de disseny segurs a l’emmagatzematge al núvol.
Descarregueu els fitxers per a aquest tutorial.
01. Afegiu codi a l'etiqueta del cos de la vostra pàgina
La creació d’un simple efecte glitch es pot fer de moltes maneres diferents. Aquí ho farem tenint un GIF animat a la part superior del text, que s’activarà i desactivarà a la pantalla. En primer lloc, afegiu aquest codi a l’etiqueta del cos de la pàgina.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Estil de la pantalla
El contingut utilitzarà una tipografia específica de Google Fonts anomenada Work Sans. Agafeu l'enllaç d'allà i col·loqueu-lo a la secció del cap; a continuació, afegiu el CSS a les etiquetes d'estil o a un fitxer CSS separat. La pàgina es fa negra amb text blanc i el suport està dissenyat per al text.
cos {fons: # 000; font-family: ‘Work Sans’, sans-serif; color: #fff; } #holder {font-size: 6em; amplada: 500 px; alçada: 300 px; marge: 0 automàtic; posició: relativa; }
03. Visualització del problema
L'efecte de fallada serà una imatge de fons que es col·locarà directament a la part superior del text. El més important aquí és que es fa invisible reduint l’opacitat a zero perquè no aparegui fins que l’usuari no interactua amb el text.
# glitch {posició: absoluta; superior: 0; esquerra: 0; índex z: 10; amplada: 100%; alçada: 100%; fons: url (glitch.gif); opacitat: 0; }
04. Aguanta-ho tot
Afegiu etiquetes de script al final de la secció del cos i creeu una referència a la memòria cau del div "glitch" del document. A continuació, una variable anomenada "over" es defineix com a falsa. S'activarà i desactivarà quan l'usuari es desplaci sobre el text.
var gl = document.getElementById ("error"); var over = false;
05. Execució del problema
La funció d'error es diu quan el ratolí es mou sobre el text. Si l'error no s'està executant, la visibilitat de l'error s'activa i es desactiva al cap d'un segon i mig.Podeu experimentar amb això i utilitzar un número aleatori per fer-lo més imprevisible.
funció fallada () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Tornar a la normalitat
L'efecte de fallada no hauria de continuar, ja que seria massa molest per a l'usuari, però com a element interactiu funciona bé. Aquí, el codi restableix l’opacitat a zero de manera que no sigui visible a la part superior del text.
function normal () {gl.style.opacity = "0"; }
Aconseguiu el vostre bitllet per a Generate New York ara
Torna l'esdeveniment de disseny web de tres dies Generate New York. Tindran lloc entre el 25 i el 27 d’abril de 2018, entre els ponents principals hi ha Dan Mall de SuperFriendly, el consultor d’animació web Val Head, el desenvolupador de JavaScript de pila completa Wes Bos i molt més. També hi ha un dia complet de tallers i valuoses oportunitats de treball en xarxa, no us ho perdeu. Aconseguiu el vostre bitllet Generate ara.
Aquest article es va publicar originalment al número 270 de la revista de disseny web creatiu Web Designer. Compra el número 270 aquí o bé subscriviu-vos a Web Designer aquí.
