Agregue un efecto de fallo a su sitio web

Sep 14, 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

Crea texturas con la herramienta de sello de patrón

Cómo Sep 14, 2025

[dieciséis] (Crédito de la imagen: LINO DRIEGHE) Si está atascado mirando a un lienzo en blanco, o se enfrenta a un breve q..

Crea tu propio cepillo caligráfico en Illustrator

Cómo Sep 14, 2025

[dieciséis] Una de las mejores cosas de Illustrator es la capacidad de crear tus propios pinceles. Puede encontrar algunos increíbles..

Cómo resolver una cara para la animación

Cómo Sep 14, 2025

[dieciséis] Cuando estaba aprendiendo primero a crear plataformas de personajes en Maya, en 2002 mientras trabajaba en el título de P..

10 consejos para el modelado de superficie dura

Cómo Sep 14, 2025

[dieciséis] Esta imagen de la gran nave de vapor oriental de Brunel de 1858 se encuentra en una exhibición permanente en un nuevo mus..

Crea un grabado digital un boceto

Cómo Sep 14, 2025

[dieciséis] En este tutorial, tomamos el grabado mecánico Etch Etch un boceto como inspiración e intento de implementar estas caract..

Crea efectos de pintura en Photoshop CC

Cómo Sep 14, 2025

[dieciséis] Adobe ha lanzado dos nuevos tutoriales de video para ayudarlo a llevar su Photoshop Nube creativa habilidades a..

Haz un GIF animado en Photoshop

Cómo Sep 14, 2025

Adobe está lanzando una nueva serie de tutoriales de video que hoy se llama hacerlo ahora, lo que tiene como objetivo esbozar cómo crear proyectos de diseño específicos usando varios ..

Crea un cepillo de adhesivo personalizado en Artrage

Cómo Sep 14, 2025

[dieciséis] Yo uso el spray de la etiqueta en Artraje - Una fabulosa herramienta de arte, especialmente si haces tus propio..

Categorías