Agregue un efecto de fallo a su sitio web

Feb 3, 2026
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 escribir un código HTML más rápido

Cómo Feb 3, 2026

(Crédito de imagen: Futuro) Los sitios web modernos requieren mucho código HTML. Los diseños complejos con varias ..

Construye un blog reactivo rápido con Svelte y Sapper

Cómo Feb 3, 2026

[dieciséis] (Crédito de la imagen: Svelte) Sapper es un marco construido en la parte superior de Svelte. Se enfoca en la vel..

10 consejos para dominar la aplicación de fotos de Apple

Cómo Feb 3, 2026

[dieciséis] La aplicación de las fotos de MacOS comenzó la vida como iPhoto: una aplicación de consumo para administrar fotografía..

Crear Cantidad Estilos y diseños de CSS específicos

Cómo Feb 3, 2026

[dieciséis] En este tutorial, vamos a echar un vistazo a las formas de cambiar los estilos de los elementos de CSS, así como aparente..

Cómo esculpir un personaje en VR

Cómo Feb 3, 2026

[dieciséis] Página 1 de 2: Página 1 Página 1 Página 2 ..

Cómo ilustrar para un evento

Cómo Feb 3, 2026

[dieciséis] Crear ilustraciones para un evento es un fantástico desafío creativo que implica decir historias con sus dibujos que se ..

5 cosas que no sabías que podrías hacer con HTML

Cómo Feb 3, 2026

[dieciséis] Vamos a enfrentarlo, el desarrollo web puede convertirse fácilmente en un desastre. HTML, CSS y Javascript Tod..

Crea efectos de incendio en 3D

Cómo Feb 3, 2026

[dieciséis] El fuego, las inundaciones y la destrucción son algunas de las tareas más comunes dadas a los artistas VFX y en este ..

Categorías