Contenido
- 01. Agrega código a la etiqueta del cuerpo de tu página.
- 02. Estilo de la pantalla
- 03. Visualización de la falla
- 04. Aguanta todo
- 05. Ejecutando el fallo
- 06. Regreso a la normalidad
- Obtenga su boleto para Generate New York ahora
Una excelente manera de llamar la atención, y mantenerla, es crear un diseño de sitio web que muestre sus talentos desde el principio (un creador de sitios web decente puede ayudar con la construcción). El sitio de la agencia web ucraniana Vintage es un gran ejemplo de esto, y lo atrae a su portafolio de diseño de realidad virtual con una combinación llamativa de un logotipo pulsante construido a partir de partículas de vidrio y un pequeño error que se activa al pasar el mouse.
- Animación web: no se requiere código
Un simple efecto de falla que se usa con moderación puede darle a su sitio un poco de interés visual adicional y es sorprendentemente fácil de implementar. A continuación, le indicamos cómo hacerlo.
¿Tiene un sitio web complejo en mente? Asegúrese de que su alojamiento web esté a la altura. Y mantenga sus archivos de diseño seguros en el almacenamiento en la nube.
Descargar los archivos para este tutorial.
01. Agrega código a la etiqueta del cuerpo de tu página.
La creación de un efecto de falla simple se puede hacer de muchas maneras diferentes. Aquí lo vamos a hacer al tener un GIF animado sobre la parte superior del texto, que se encenderá y apagará en la pantalla. Primero, agregue este código a la etiqueta del cuerpo de su página.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Estilo de la pantalla
El contenido utilizará un tipo de letra específico de Google Fonts llamado Work Sans. Coge el enlace desde allí y colócalo en la sección de tu cabeza; luego agregue el CSS a las etiquetas de estilo o un archivo CSS separado. La página está en negro con texto en blanco y el soporte está diseñado para el texto.
cuerpo {fondo: # 000; familia de fuentes: "Work Sans", sans-serif; color: #fff; } #holder {tamaño de fuente: 6em; ancho: 500px; altura: 300px; margen: 0 automático; posición: relativa; }
03. Visualización de la falla
El efecto de falla será una imagen de fondo que se colocará directamente sobre la parte superior del texto. La parte importante aquí es que se hace invisible al reducir la opacidad a cero para que no se muestre hasta que el usuario interactúe con el texto.
#glitch {posición: absoluta; arriba: 0; izquierda: 0; índice z: 10; ancho: 100%; altura: 100%; fondo: url (glitch.gif); opacidad: 0; }
04. Aguanta todo
Agregue etiquetas de secuencia de comandos al final de la sección del cuerpo y cree una referencia en caché al div "glitch" en el documento. Entonces, una variable llamada "over" se establece en false. Esto se activará y desactivará cuando el usuario se mueva sobre el texto.
var gl = document.getElementById ("error"); var over = false;
05. Ejecutando el fallo
La función de falla se llama cuando el mouse se mueve sobre el texto. Si la falla no se está ejecutando, la visibilidad de la falla se enciende y se apaga después de un segundo y medio.Puede experimentar con esto y usar un número aleatorio para hacerlo más impredecible.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (función () {normal ();}, 1500); }}
06. Regreso a la normalidad
El efecto de falla no debería permanecer encendido ya que sería demasiado molesto para el usuario, pero como elemento interactivo funciona bien. Aquí, el código restablece la opacidad a cero para que no sea visible en la parte superior del texto.
función normal () {gl.style.opacity = "0"; }
Obtenga su boleto para Generate New York ahora
El evento de diseño web de tres días Generate New York está de regreso. Entre el 25 y el 27 de abril de 2018, los oradores principales incluyen a Dan Mall de SuperFriendly, el consultor de animación web Val Head, el desarrollador de JavaScript de pila completa Wes Bos y más. También hay un día completo de talleres y valiosas oportunidades para establecer contactos, no se lo pierda. Obtenga su boleto Generate ahora.
Este artículo se publicó originalmente en el número 270 de la revista de diseño web creativo Web Designer. Compra el número 270 aquí o suscríbete a Web Designer aquí.
