Cómo crear un efecto GLITCH con CSS | |
Con el lenguaje CSS es posible crear efectos y animaciones personalizadas dentro de páginas Web y sitios de Internet. | |
En este artículo veremos cómo desarrollar una animación GLITCH y obtener este resultado: | |
Cómo crear un efecto GLITCH animado en texto en CSS | |
Como de costumbre, en primer lugar creamos un nuevo documento HTML y establecemos la estructura de la página Web: | |
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Cómo crear un efecto GLITCH con CSS</title> </head> <body> </body> </html> |
Dentro de nuestra página insertaremos todos los elementos HTML y CSS necesarios para la creación del efecto GLITCH animado. Podría aparecer como un efecto muy complejo visualmente. | |
En realidad, es bastante simple de hacer y no requiere aplicar demasiado marcado HTML. Entonces, escribamos inmediatamente el código que formará el cuerpo de nuestro documento. |
<div id="container"> <h1 class="glitch"> DZOSOFT.COM <span class="first">DZOSOFT.COM</span> <span class="second" aria-hidden="true">DZOSOFT.COM</span> </h1> </div> |
Analicemos lo escrito, externamente encontramos el <div></div> elemento contenedor que tendrá la tarea de contener todos los elementos en su interior. | |
Internamente encontramos el elemento principal, que es el texto "Efecto Glitch" insertado dentro de las etiquetas <h1></h1>. | |
A este elemento es necesario asignarle una clase para hacerlo reconocible y poder recordarlo rápidamente, por lo que lo nombramos agregando class="glitch"strong>. Continuamos señalando que hay otros elementos dentro de la etiqueta principal <h1></h1>, de hecho el objetivo que queremos lograr incluye 3 capas de diferentes colores que, superpuestas animadas, forman el efecto deseado. | |
Por eso además del texto "Efecto Glitch" entre <h1></h1> encontramos 2 elementos más con el mismo texto. Cada uno de los dos elementos <span></span> puede recordarse gracias a la clase de identificación. | |
Definamos ahora el código CSS gracias al cual podremos crear el efecto GLITCH deseado | |
El archivo CSS | |
Vamos a crear un nuevo archivo CSS y darle un nombre, por ejemplo, style.css, para que pueda identificarse y recuperarse fácilmente. Después de crear el archivo CSS, lo incluimos en el código del archivo HTML para que podamos llamarlo. Luego insertamos un enlace externo al archivo de estilo en el documento principal: | |
<enlace href="estilo.css" rel="hoja de estilo" type="text/css"> | |
Ahora estamos listos para escribir las reglas de estilo que darán forma al efecto GLITCH. | |
Vayamos dentro del archivo style.css y definamos el formato del contenedor general de nuestro documento o el cuerpo. |
body{ width: 100%; height: 100vh; display: grid; align-items: center; justify-items: center; margin: 0px; background: #000; } |
Usando la visualización de reglas: grilla; align-items: center;and allow-items: center;todos los objetos contenidos dentro del contenedor <div class=”container”></div> se colocará exactamente en el centro de la página. También establecemos un color de fondo oscuro para que el efecto GLITCH sea más visible. | |
Vamos a estilizar el texto | |
En este punto es hora de pasar al tema de nuestro artículo o <h1></h1> llamada falla | |
.glitch { font-size: 150px; font-weight: 700; text-transform: uppercase; position: relative; text-align: center; font-family: sans-serif; color: #fff; } |
Obtendremos 3 escritos de "efecto Glitch" cuando hayamos insertado dos elementos <span></span> además del tema principal <h1></h1>. Así que centrémonos en la estilización de estos dos elementos adicionales. Primero indicamos position:absolute;para ambos e inmediatamente después establecemos la position. |
.glitch span { position: absolute; top: 0; left: 0; } |
Una vez hecho esto, solo queda continuar con la definición del estilo y la creación del matiz que animaremos más adelante. | |
Aprovechemos la propiedad CSS llamada text-shadow que le permite agregar sombras al texto y formar múltiples niveles de colores RGB. | |
Gracias a esta propiedad podemos insertar los 3 colores RGB y empezar a dar forma al efecto final. | |
Seguimos creando la animación que se asignará a los dos elementos <span></span>. | |
.glitch span.first { animation: glitch 750ms infinite; } .glitch span.second { animation: glitch 550ms infinite; } |
Analizando lo escrito, notamos que las dos animaciones tienen una duración infinita pero una velocidad diferente, 750ms y 550ms, esto como que tendremos una discrepancia de movimiento y por lo tanto un mejor resultado final. | |
Damos forma a la animación. | |
Continuamos hacia el final del artículo y escribimos las reglas que darán forma a la animación, primero borramos las reglas text-shadow escritas previamente dentro de las reglas asignadas al elemento .glitch span y definimos los @keyframes recordando el nombre de la animación creado ahora mismo. | |
@keyframes glitch { 0% { text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.85), −0.04em -0.030em 0 rgba(0, 255, 0, 0.85), −0.030em 0.05em 0 rgba(0, 0, 255, 0.85); } 20% { text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.85), −0.04em -0.030em 0 rgba(0, 255, 0, 0.85), −0.030em 0.05em 0 rgba(0, 0, 255, 0.85); } 21% { text-shadow: -0.04em -0.030em 0 rgba(255, 0, 0, 0.85), 0.025em 0.025em 0 rgba(0, 255, 0, 0.85), −0.04em -0.04em 0 rgba(0, 0, 255, 0.85); } 49% { text-shadow: -0.04em -0.030em 0 rgba(255, 0, 0, 0.85), 0.025em 0.025em 0 rgba(0, 255, 0, 0.85), −0.04em -0.04em 0 rgba(0, 0, 255, 0.85); } 50% { text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.85), 0.05em 0 0 rgba(0, 255, 0, 0.85), 0 -0.04em 0 rgba(0, 0, 255, 0.85); } 99% { text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.85), 0.05em 0 0 rgba(0, 255, 0, 0.85), 0 -0.04em 0 rgba(0, 0, 255, 0.85); } 100% { text-shadow: -0.030em 0 0 rgba(255, 0, 0, 0.85), −0.030em -0.030em 0 rgba(0, 255, 0, 0.85), −0.030em -0.04em 0 rgba(0, 0, 255, 0.85); } } |
Lo que tendremos que hacer es definir fotogramas clave que llenen la animación del 0% al 100% alternando el coloreado RGB. Este último consta de tres valores numéricos que van del 0 al 255 y corresponden a los colores rojo, verde y azul combinados con lo que es un movimiento rápido y desalineado generando un GLITCH. | |
Además de determinar el porcentaje de animación, es importante crear el efecto "snap" posible gracias a las pequeñas diferencias porcentuales. En nuestro ejemplo (20 % y 21 % o 49 % y 50 % y finalmente 99 % y 100 %) se hizo para que la animación no se mueva con fluidez y cree el resultado final. | |