Agregue un efecto de fallo a su sitio web

Sep 13, 2025
Cómo

Una excelente manera de llamar la atención, y mantenerlo, es crear un Diseño de sitio web Eso muestra tus talentos desde abajo. Agencia web de Ukraine Clásico El sitio es un gran ejemplo de esto, acercándole a su VR. portafolio de diseño con una combinación de llamativas de un logotipo pulsante construido a partir de partículas de vidrio y un poco de falla que se activa en el flujo.

  • Animación web: no requiere código

Un simple efecto de falla utilizado de manera moderna puede darle a su sitio un poco de interés visual vital, y es sorprendentemente fácil de implementar. Aquí es cómo hacerlo.

Descargar los archivos Para este tutorial.

01. Añadir código a la etiqueta del cuerpo de su página

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

El efecto de falla de la vintage es fácil de reproducir si conoces su secreto.

Crear un efecto simple de falla se puede hacer de muchas maneras diferentes. Aquí vamos a hacerlo teniendo un GIF animado en la parte superior del texto, que se encenderá y apagará en la pantalla. En primer lugar, agregue este código a la etiqueta del cuerpo de su página. 

 & lt; div id = "titular" onmouseover = "glitch ()" & gt;
  & lt; div id = "falch" & gt; & lt; / DIV & GT;
  WEB
  & lt; br & gt; PRODUCTO-
  & lt; br & gt; ION
& lt; / DIV & GT;

02. Estilizar la pantalla

El contenido utilizará un tipo de letra específico de Google Fonts llamado Work Sans. Toma el enlace desde allí y colóquelo en la sección de su cabeza; Luego, agregue los CSS a las etiquetas de estilo o un archivo CSS separado. La página se hace negro con texto blanco y el soporte está diseñado para el texto. 

 Cuerpo {
  Fondo: # 000;
  Fuente-familia: 'Trabajo Sans', Sans-Serif;
  Color: #fff;
}
#poseedor {
  Tamaño de fuente: 6EM;
  Ancho: 500px;
  Altura: 300px;
  Margen: 0 Auto;
  Posición: Relativo;
}

03. Mostrando la falla

El efecto de falla será una imagen de fondo que se coloca directamente sobre la parte superior del texto. La parte importante aquí es que se hace invisible reduciendo la opacidad a cero para que no se presente hasta que el usuario interactúe con el texto. 

 #gliendo {
  Posición: Absoluto;
  TOP: 0;
  izquierda: 0;
  Índice Z: 10;
  Ancho: 100%;
  Altura: 100%;
  Fondo: URL (Glitch.gif);
  Opacidad: 0;
}

04. Sostenga todo

Agregue etiquetas de script al final de la sección del cuerpo y cree una referencia en caché al DIV de 'Glitch' en el documento. Luego, una variable llamada 'sobre' se establece en FALSE. Esto se encenderá y se apagará cuando el usuario se mueva sobre el texto. 

 VAR GL = DOCUMENTO.GETELEMENTBYID ("GLITT");
var sobre = falso;

05. Corriendo la falla.

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 uno y medio segundos. Puede experimentar con esto y usar un número aleatorio para que sea más impredecible. 

 Function Glitch () {
  Si (sobre == falso) {
  gl.style.opacity = "1";
  Settimeout (función () {
  normal();
  }, 1500);
  }
}

06. De vuelta a la normalidad.

El efecto de falla no debería permanecer en lo que sería demasiado molesto para el usuario, sino como un elemento interactivo, funciona bien. Aquí, el código restablece la opacidad de nuevo a cero para que no sea visible en la parte superior del texto. 

 Función normal () {
  gl.style.opacidad = "0";
}

Obtenga su boleto para generar Nueva York ahora

Evento de diseño web de tres días. Generar nueva york está de vuelta. Ejecutando entre el 25 y el 27 de abril de 2018, los oradores de titulares incluyen el centro comercial Dan Mall de Superfriendly, el Consultor Web Animation Val Head, el desarrollador de Javascript de Stack Full-Stack Wes y más. También hay un día completo de talleres y oportunidades de redes valiosas, no lo pierdas. Obtenga su boleto de generación ahora .

Este artículo se publicó originalmente en la emisión 270 de Creative Web Design Magazine Web Designer. Comprar emisión 270 aquí o Suscríbete al diseñador web aquí .

Artículos relacionados:

  • Crea un arte de fallo con estos intrincados filtros de fotos.
  • Animar svg con javascript
  • 10 grandes recursos de animación CSS

Cómo - Artículos más populares

Cómo convertir la fotografía en la ilustración

Cómo Sep 13, 2025

[dieciséis] (Crédito de la imagen: Cindy Kang) Comprender la mejor manera de convertir la fotografía en Ilustración abrir�..

Cómo resolver un resumen de diseño complicado

Cómo Sep 13, 2025

[dieciséis] [Imagen: Jack Renwick Studio] Si alguien sabe cómo manejar un resumen difícil, son los diseñadores inteligente..

Use espacio negativo para dibujar mejores manos

Cómo Sep 13, 2025

[dieciséis] Incluso un proceso aparentemente complejo como dibujar una mano se puede simplificar, con las técnicas y trucos de dibujo..

Diseñador de afinidad: Cómo usar la herramienta de la pluma

Cómo Sep 13, 2025

Necesita poca introducción, pero Affinity Designer es un conjunto de herramientas de edición de arte vectorial disponibles para Mac / Windows y ahora también en el iPad . Es..

Cómo prototipo Una aplicación móvil con origami Studio

Cómo Sep 13, 2025

En un mundo donde los usuarios tienen altas expectativas de su experiencia en la Web y el móvil, la creación de prototipos y la evaluación del usuario es clave. Ahora es común que se iter..

Modelado de geometría compleja: 5 puntas superiores

Cómo Sep 13, 2025

[dieciséis] A lo largo de mis años de experiencia, trabajando en Configuración de estudio de videojuegos y enseñanza. Arte 3d..

Cómo dibujar Harley Quinn

Cómo Sep 13, 2025

[dieciséis] Para mí, el atractivo de Digital. Técnicas de pintura son simples A diferencia de los medios tradicionales, p..

Cómo usar la característica 'Font Font' de Photoshop

Cómo Sep 13, 2025

[dieciséis] Los diseñadores y creativos de todos los campos son como las urracas en su apetito por coleccionar cosas brillantes y bri..

Categorías