Cómo crear efectos de imagen y texto con fallas en CSS

En este tutorial, le mostraremos cómo crear un efecto de texto de falla. Los efectos especiales y las animaciones pueden ayudar a que los sitios web se destaquen, creando un impacto inmediato en el usuario antes de que haya tenido la oportunidad de leer el contenido principal. Si su página de inicio necesita sorprender a los visitantes, puede crear toneladas de efectos diferentes usando solo CSS.

Nuestro proceso para crear texto con fallas aquí es bastante similar a trabajar con software de animación. Colocaremos fotogramas clave en puntos específicos y los usaremos para controlar la acción. La diferencia con los fotogramas clave en CSS es que están escritos como porcentajes para la línea de tiempo de la animación en el código. Esto no es tan abrumador como parece; una vez que lo prueba, es relativamente sencillo lograr buenos resultados.

Se utilizará una pequeña cantidad de JavaScript en el tutorial, para eliminar la pantalla de carga una vez que las imágenes se carguen en la página, pero el enfoque principal aquí está en Animación CSS . También usaremos Cuadrícula CSS para colocar elementos en la pantalla.



01. Prepárate

Para empezar, abra el comienzo carpeta de la archivos de proyecto dentro de su editor de código. Abre el index.html página, que contiene solo una página HTML esquelética básica. En la sección de cabecera, las fuentes deben vincularse para que el diseño se muestre correctamente. Agregue el enlace de estilo para las fuentes.

|_+_|

El diseño básico en CSS se ha iniciado en el site.css archivo, pero todas las partes importantes relacionadas con el efecto de falla se agregarán más adelante. En la sección del encabezado del documento, vincule el CSS para que el diseño básico de la página esté en su lugar.

|_+_|

03. Configurar una pantalla de carga

Pantalla de inicio negra con icono de marca

Esta pantalla se mostrará mientras se carga la página

Ahora ve a la sección del cuerpo de la página. Contiene todos los elementos visibles de la página que se muestran en el navegador. Aquí agregue un div que mantendrá la 'pantalla de precargador' hasta que se haya cargado todo en la página. Esto mostrará un logotipo en el centro de la página.

|_+_|

04. Agregar una barra de encabezado

Pantalla de inicio negra con título y una breve descripción mostrada

Los elementos básicos del diseño, antes de que se agregue el efecto de texto de falla.

En la parte superior de la pantalla habrá un pequeño encabezado que contiene un logotipo SVG para el sitio a la izquierda con un encabezado de texto. Luego, en el lado derecho de la pantalla, habrá un menú en línea para facilitar la navegación. La estructura del código aquí agrega esos elementos a la página.

|_+_|

05. Agregar imágenes

Ahora, la sección que sigue contiene varias versiones de la misma imagen en la glitchit clase. Lo que esto hará es activar y desactivar diferentes partes de estas imágenes en diferentes momentos para dar un efecto de falla. A continuación, se encuentra el texto que se colocará en la parte superior de las imágenes.

|_+_|

06. Activa el efecto de texto de falla

Al final del contenido del cuerpo se colocan las etiquetas JavaScript. Todo lo que hace es verificar que la página se haya cargado y luego elimina la pantalla de carga, lo que a su vez activa la animación del efecto de falla para comenzar agregando una clase al cuerpo para afectar las secciones de falla relevantes.

|_+_|

07. Configurar variables CSS

Guarde la página ahora y vaya al site.css archivo en la carpeta CSS. Ya hay código aquí, pero justo encima de cualquier otro código, agregue las variables que se muestran a continuación. Estas variables CSS contendrán colores y tamaños que se usarán más adelante en el diseño.

|_+_|

08. Experimente con configuraciones variables

Como verá, estas variables se asignan a la etiqueta del cuerpo para que puedan ser utilizadas por cualquier etiqueta en la página dentro del cuerpo, que es esencialmente toda la página visible. Aquí se configuran los modos de transparencia y fusión para las diferentes imágenes. Hay cinco imágenes y puede experimentar con estas configuraciones para obtener resultados diferentes.

|_+_|

09. Llena la pantalla de imágenes

Para mantener el código perfectamente unido, desplácese hacia abajo hasta el comentario que marca los pasos 9 a 13 en el archivo CSS, agregando este código. Aquí el código de falla coloca el div que contiene todas las imágenes para llenar la pantalla completa y colocarse absolutamente en la parte superior izquierda de la pantalla. Tenga en cuenta que obtiene su ancho y alto de las variables CSS.

|_+_|

10. Ajustar la posición de la imagen

Página de inicio con fotografía a pantalla completa agregada

El efecto de falla utiliza copias reposicionadas de la misma imagen

Como el efecto de falla se compone de copias de la misma imagen, este código coloca cada div en la página y lo hace un poco más grande que la pantalla. Lo coloca en la parte superior e izquierda para tener en cuenta que es más grande, y luego la imagen se coloca en el fondo para llenar la imagen.

|_+_|

11. Seleccionar imágenes

El código aquí selecciona todas las imágenes excepto la primera. Esto se debe a que la primera imagen permanece en la página, mientras que las otras se encienden y apagan en la parte superior con la animación de fotogramas clave. Estas imágenes superiores se ocultan hasta que se necesitan con la opacidad establecida en cero.

|_+_|

12. Ajuste las imágenes dos y tres

La segunda y la tercera imagen están configuradas para animarse en este código. Se les dan los respectivos modos de mezcla y color para que se muestren de manera diferente. La mayor diferencia aquí es que se les dan diferentes animaciones de fotogramas clave para seguir para mezclar.

|_+_|

13. Ajuste las imágenes cuatro y cinco

Esta vez, las siguientes dos imágenes se configuran bastante cerca de las demás, pero nuevamente, esta vez hay diferentes modos de fusión y animaciones para que aparezcan estas imágenes. Los fotogramas clave aún no se han creado para algunas de estas animaciones y vendrán a continuación.

|_+_|

14. Agregue el primer conjunto de fotogramas clave

Los fotogramas clave funcionan tomando diferentes secciones de la imagen y recortándolas para que solo eso sea visible. La opacidad se activa y desactiva en diferentes momentos para que partes de la imagen sean visibles en diferentes momentos para las otras animaciones y, por lo tanto, crea el efecto de falla. La imagen se mueve ligeramente en el eje x.

|_+_|

15. Utilice la ruta del clip

La ruta del clip está tomando un rectángulo, por lo que los dos primeros números están arriba a la izquierda y luego arriba a la derecha. A esto le siguen la parte inferior derecha y la parte inferior izquierda. Al mover estos números, diferentes partes de la imagen se vuelven visibles en diferentes puntos.

diferencia entre el iphone 8 plus y el iphone 11
|_+_|

16. Acelera el movimiento

Al mover la ruta del clip tan rápidamente sobre varios fotogramas clave, el efecto se acumula y las diferentes partes de la imagen parecen parpadear de manera errática. Agregue que más capas de imágenes también están haciendo esto y el efecto funciona muy bien en lo que hace.

|_+_|

17. Termina los fallos de la imagen

Después del 22%, la imagen se apaga hasta que la animación se reproduce nuevamente. Esto completa el falla-1 efecto con falla-2 y falla-3 ya se suministra en el código. La siguiente sección también fallará el texto que está sobre la parte superior de la imagen.

|_+_|

18. Cómo crear texto con fallas

Texto recortado para mostrar el efecto de falla en progreso en la página de inicio

El texto solo se recorta brevemente para garantizar que aún se pueda leer

Este código funciona de manera extremadamente similar al código anterior, excepto que da la vuelta al texto y luego lo recorta, para dar un efecto de salto que se mueve dramáticamente. A continuación, la ruta del clip revela solo secciones más pequeñas, con un movimiento rápido a través de los fotogramas clave.

|_+_|

19. Más recorte

El efecto continúa en esta sección de código al cambiar rápidamente la forma del trazado de recorte. los ruta del clip también viene con el -webkit- prefijo, pero por brevedad, esto no se ha mostrado en ninguno de los códigos aquí. En el momento de redactar este artículo, Clip Path no se admite actualmente en IE, Edge u Opera Mini, pero sí en todos los demás navegadores.

|_+_|

20. Da la vuelta al texto

En la animación de falla de texto final, el texto vuelve a su posición original y espera a que los fotogramas clave vuelvan a aparecer. Como puede ver, toda la animación tiene lugar en un 10 por ciento mientras permanece inactiva durante el 90 por ciento del tiempo, lo que le da al texto la cantidad adecuada de angustia y permite que sea legible.

|_+_|

21. Crea un flash rápido

Página de inicio con efecto de falla en progreso

El efecto de falla se ejecuta cada pocos segundos para dar un aspecto angustiado.

El paso final es que a una imagen se le da la animación de flash de falla, y esta serie de fotogramas clave simplemente coloca la imagen en la pantalla con una opacidad del 20 por ciento durante un período corto solo para dar un desplazamiento del original. Guarde el archivo CSS ahora y el efecto debería comenzar a reproducirse una vez que el contenido se cargue en el navegador.

|_+_|

Este artículo se publicó originalmente en la revista de diseño web creativo Web Designer. Comprar número 281 o suscribir .

Leer más: