Contenido
- 01. Inicie el documento HTML
- 02. Contenido HTML visible
- 03. Iniciación CSS
- 04. Contenedor de animación
- 05. Iniciación de la animación
- 06. Animar a la vista
- 07. Finalizando la animación
Love Lost by Canada's Jam3 es un poema interactivo bellamente oscuro y listo para dispositivos móviles con un corazón real sobre los sentimientos perdurables en torno al amor perdido. El diseño del sitio web se creó utilizando HTML5 con la biblioteca GSAP impulsando su animación, una de sus características más llamativas visualmente es su texto animado en 3D que realmente da vida a la poesía de Love Lost.
- Crea efectos de tipografía 3D interactivos
Parece impresionante como el infierno y no es difícil incorporarlo a su propio trabajo para crear una experiencia de usuario atractiva; así es como se hace.
¿Quiere crear su propio sitio atractivo? Pruebe una herramienta de creación de sitios web y mantenga todo funcionando sin problemas eligiendo el servicio de alojamiento web adecuado.
01. Inicie el documento HTML
El primer paso es definir la estructura del documento HTML. Esto incluye el contenedor HTML que inicia el documento, que contiene las secciones del encabezado y el cuerpo. Si bien la sección del encabezado se usa principalmente para cargar el archivo CSS externo, la sección del cuerpo almacenará el contenido de la página visible creado en el paso 2.
! DOCTYPE html> html> head> title> Movimiento de texto 3D / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 AQUÍ / cuerpo> / html>
02. Contenido HTML visible
El contenido HTML visible consiste en un contenedor de artículos que contiene el texto visible. La parte importante del contenedor del artículo es el atributo "data-animate", al que CSS hará referencia para aplicar los efectos visuales. El texto dentro del artículo está hecho de una etiqueta h1 para indicar que el contenido es el título principal de la página.
artículo data-animate = "muévete"> h1> ¡Hola! / h1> / artículo>
03. Iniciación CSS
Cree un nuevo archivo llamado "styles.css". El primer conjunto de instrucciones establece que el cuerpo y el contenedor HTML de la página tengan un fondo negro, así como ningún espacio visible entre los bordes. El blanco también se establece como el color de texto predeterminado para que todos los elementos secundarios de la página lo hereden; evitando el color negro predeterminado del texto que hace que el contenido parezca invisible.
html, cuerpo {fondo: # 000; acolchado: 0; margen: 0; color: #fff; }
04. Contenedor de animación
El contenedor de contenido al que se hace referencia con el atributo "data-animate" tiene aplicados estilos específicos. Su tamaño está configurado para coincidir con el tamaño completo de la pantalla usando unidades de medida vw y vh, además de estar ligeramente girado. Se aplica una animación llamada "moveIn", que tendrá una duración de 20 segundos y se repetirá infinitamente.
[data-animate = "move in"] {posición: relativa; ancho: 100vw; altura: 100vh; opacidad: 1; animación: moveIn 20s infinite; alineación de texto: centro; transformar: rotar (20 grados); }
05. Iniciación de la animación
La animación "moveIn" a la que se hace referencia en el paso anterior requiere una definición con @keyframes. El primer fotograma que comienza en el 0% de la animación establece el tamaño de fuente predeterminado, la posición del texto y la sombra visible. Además, el elemento se establece con opacidad cero para que sea inicialmente invisible, es decir. mostrado fuera de la vista.
@keyframes moveIn {0% {tamaño de fuente: 1em; izquierda: 0; opacidad: 0; sombra de texto: ninguna; } * * * PASO 6 AQUÍ}
06. Animar a la vista
El siguiente fotograma se coloca al 10% a través de la animación. Este marco establece la opacidad en completamente visible, lo que hace que el texto se anime gradualmente a la vista.Además, se agregan múltiples sombras con azul y valores de color decrecientes para dar la ilusión de profundidad 3D al texto.
10% {opacidad: 1; sombra de texto: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * PASO 7 AQUÍ
07. Finalizando la animación
Los fotogramas finales ocurren al 80% y al final de la animación. Estos son los encargados de aumentar el tamaño de la fuente y mover el elemento hacia la izquierda. También se aplican nuevas configuraciones para que la sombra del texto se anime, mientras que también se desvanece el texto fuera de la vista de los marcos del 80% al 100%.
80% {tamaño de fuente: 8em; izquierda: -8em; opacidad: 1; } 100% {tamaño de fuente: 10em; izquierda: -10em; opacidad: 0; sombra de texto: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Nota: sea cual sea el proyecto en el que se esté embarcando, tener un almacenamiento en la nube que pueda hacer frente es esencial (nuestra guía lo ayudará).
Este artículo se publicó originalmente en el número 273 de la revista de diseño web creativo Web Designer. Compra el número 273 aquí o suscríbete a Web Designer aquí.
