18 mejores ejemplos de animación CSS
Cómo recrear algunas de las mejores animaciones CSS en la web hoy en día.
Probablemente haya notado que la cantidad de ejemplos de animación CSS que aparecen en los sitios web ha aumentado últimamente. La animación es una de las tendencias clave de diseño web de 2019 . En toda la web, los diseñadores se están volviendo creativos y utilizan animaciones CSS para dar personalidad a sus sitios, explicar ideas complejas de forma rápida y sencilla, y guiar las acciones de sus usuarios.
Estas animaciones no necesitan ser exageradas, incluso un movimiento sutil puede tener un gran impacto (la mayoría aún tiene sus raíces en los 12 principios clásicos de la animación de Disney ).
Aquí, hemos reunido una selección de ejemplos de animación CSS de algunos de los sitios web más grandes del mundo, y hemos introducido el código para mostrarle cómo lograr estos efectos usted mismo. Esta página presenta tutoriales detallados, o haga clic en la página 2 para obtener efectos inspiradores (y enlaces a su código) para que usted pueda profundizar en sí mismo.
¿Qué es la animación con CSS?
La animación con CSS se refiere a la técnica de crear efectos de animación en elementos de una página web utilizando el lenguaje de estilos en cascada (CSS). Con las animaciones en CSS, se pueden crear efectos visuales en elementos HTML como transiciones, desplazamientos, rotaciones, cambios de tamaño y color, entre otros.
Para crear una animación con CSS, se utilizan las propiedades «animation» y «keyframes». La propiedad «keyframes» permite definir una secuencia de cambios de estilo que se aplicarán al elemento a lo largo de la animación. La propiedad «animation» se utiliza para aplicar la animación al elemento y definir la duración, el retraso, la repetición y otros parámetros de la animación.
La animación con CSS puede mejorar la experiencia de usuario de una página web y hacerla más atractiva visualmente. Sin embargo, es importante utilizarla con moderación y evitar efectos demasiado exagerados que puedan distraer o dificultar la navegación.
Ejemplo de código CSS:
cssCopy code@keyframes mover {
from {left: 0px;}
to {left: 200px;}
}
.elemento {
animation-name: mover;
animation-duration: 2s;
animation-iteration-count: infinite;
}
En este ejemplo, se define una animación llamada «mover» utilizando la regla «@keyframes». Luego, se aplica la animación al elemento con la clase «elemento» utilizando la propiedad «animation-name». La animación dura 2 segundos y se repite infinitamente, y el elemento se mueve de izquierda a derecha en la página.
¿Cómo hacer que una animacion sea infinita en CSS?
Para hacer que una animación sea infinita en CSS, se utiliza la propiedad «animation-iteration-count» y se le asigna el valor «infinite». Esta propiedad determina cuántas veces se repetirá la animación antes de detenerse, y al establecerla en «infinite», se hará que la animación se repita de forma continua y sin límite.
Aquí hay un ejemplo de cómo hacer que una animación sea infinita en CSS:
cssCopy code.elemento {
animation-name: mover;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes mover {
from {left: 0px;}
to {left: 200px;}
}
En este ejemplo, se aplica la animación «mover» al elemento con la clase «elemento» utilizando la propiedad «animation-name». Luego, se establece la duración de la animación en 2 segundos y se hace que la animación se repita de forma infinita mediante la propiedad «animation-iteration-count».
Es importante tener en cuenta que hacer que una animación sea infinita puede aumentar el uso de recursos en la página, por lo que es recomendable utilizarlo con moderación y solo cuando sea necesario para evitar ralentizar la página.
Te dejamos con estos efectos de animación con texto CSS.
01. Burbujas se elevan
- Como se ve en: 7UP
- Ver el codigo
La animación de burbujas CSS que se incluye en 7UP es un hermoso ejemplo de cómo llevar un tema de marca al diseño del sitio web. La animación consta de algunos elementos: el ‘dibujo’ SVG de las burbujas y luego dos animaciones aplicadas a cada burbuja.
La primera animación cambia la opacidad de la burbuja y la mueve verticalmente en el cuadro de vista; el segundo crea el efecto de bamboleo para un realismo agregado. Las compensaciones se manejan apuntando a cada burbuja y aplicando una duración y retraso de animación diferentes.
Para crear nuestras burbujas estaremos usando SVG . En nuestro SVG creamos dos capas de burbujas: una para las burbujas más grandes y otra para las burbujas más pequeñas. Dentro del SVG colocamos todas nuestras burbujas en la parte inferior del cuadro de vista.
<g class="bubbles-large" stroke-width="7">
<g transform="translate(10 940)">
<circle cx="35" cy="35" r="35"/>
</g>
...
</g>
<g class="bubbles-small" stroke-width="4">
<g transform="translate(147 984)">
<circle cx="15" cy="15" r="15"/>
</g>
</g>
...
</g>Para aplicar dos animaciones separadas a nuestros SVG, ambas utilizando la propiedad de transformación, necesitamos aplicar las animaciones a elementos separados. El elemento <g> en SVG se puede usar de manera muy similar a un div en HTML; Necesitamos envolver cada una de nuestras burbujas (que ya están en un grupo) en una etiqueta de grupo.
<g>
<g transform="translate(10 940)">
<circle cx="35" cy="35" r="35"/>
</g>
</g>CSS tiene un potente motor de animación y un código realmente simple para producir animaciones complejas. Comenzaremos moviendo las burbujas hacia arriba en la pantalla y cambiando su opacidad para que aparezcan y desaparezcan al principio y al final de la animación.
@keyframes up {
0% {
opacity: 0;
}
10%, 90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-1024px);
}
}
Para crear un efecto de bamboleo, simplemente necesitamos mover (o traducir) la burbuja a la izquierda y a la derecha, solo en la cantidad correcta. Demasiado hará que la animación se vea demasiado entretenida y desconectada, mientras que muy poco pasará desapercibido. La experimentación es clave cuando se trabaja con animación.
@keyframes wobble {
33% {
transform: translateX(-50px);
}
66% {
transform: translateX(50px);
} }Para aplicar la animación a nuestras burbujas, utilizaremos los grupos que usamos anteriormente y la ayuda de nth-of-type para identificar cada grupo de burbujas individualmente. Comenzamos aplicando un valor de opacidad a las burbujas y la propiedad de cambio de cambio para utilizar la aceleración de hardware.
.bubbles-large > g {
opacity: 0;
will-change: transform, opacity;}
.bubbles-large g:nth-of-type(1) {...}
...
.bubbles-small g:nth-of-type(10) {...}Queremos mantener todos los tiempos de animación y los retrasos a un par de segundos entre sí y hacer que se repitan infinitamente. Por último, aplicamos la función de temporización de facilidad de entrada a nuestra animación de oscilación para que se vea un poco más natural.
.bubbles-large g:nth-of-type(1) {
animation: up 6.5s infinite; }
.bubbles-large g:nth-of-type(1) circle {
animation: wobble 3s infinite ease-in-out; }
...
bubbles-small g:nth-of-type(9) circle {
animation: wobble 3s 275ms infinite ease-in-out; }
.bubbles-small g:nth-of-type(10) {
animation: up 6s 900ms infinite;}02. Desplazar el mouse
- Como se ve en: Entrenamiento Báltico
- Ver el codigo
Una animación sutil del mouse de desplazamiento puede orientar al usuario cuando aterriza por primera vez en un sitio web. Aunque esto se puede lograr usando elementos y propiedades HTML, usaremos SVG ya que es más adecuado para dibujar.
Dentro de nuestro SVG necesitamos un rectángulo con esquinas redondeadas y un círculo para el elemento que vamos a animar. Al usar SVG podemos escalar el ícono a cualquier tamaño que necesitemos.
<svg class="mouse" xmlns="..." viewBox="0 0 76 130" preserveAspectRatio="xMidYmid meet">
<g fill="none" fill-rule="evenodd">
<rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>
<circle cx="36.5" cy="31.5" r="4.5" fill="#FFF"/>
</g>
</svg>Ahora que hemos creado nuestro SVG, debemos aplicar algunos estilos simples para controlar el tamaño y la posición del icono dentro de nuestro contenedor. Envolvimos un enlace alrededor del SVG del mouse y lo colocamos en la parte inferior de la pantalla.
.scroll-link {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
}
.mouse {
max-width: 2.5rem;
width: 100%;
height: auto;
}A continuación vamos a crear nuestra animación. Con el 0 y el 20 por ciento de nuestra animación, queremos establecer el estado de nuestro elemento cuando comienza. Al configurarlo en el 20% del camino, permanecerá inmóvil durante una parte del tiempo cuando se repita infinitamente.
@keyframes scroll {
0%, 20% {
transform: translateY(0) scaleY(1);
}
}Necesitamos agregar el punto de inicio de opacidad y luego transformar la posición Y y la escala vertical en la marca del 100%, el final de nuestra animación. Lo último que debemos hacer es eliminar la opacidad para desvanecer nuestro círculo.
@keyframes scroll {
...
10% {
opacity: 1;
}
100% {
transform: translateY(36px) scaleY(2);
opacity: 0.01;
}
}Por último, aplicamos la animación al círculo, junto con la propiedad ‘transform-origin’ y la propiedad will-change para permitir la aceleración del hardware. Las propiedades de la animación son bastante autoexplicativas. La función de temporización cúbico-bezier se utiliza para retirar primero el círculo antes de colocarlo en la parte inferior de la forma de nuestro mouse; Esto añade una sensación lúdica a la animación.
.scroll {
animation-name: scroll;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
animation-iteration-count: infinite;
transform-origin: 50% 20.5px;
will-change: transform;
}03. Escritura animada.
- Como se ve en: Jardín Ocho
- Ver el código para las rutas y el texto.
El sitio web de Garden Eight utiliza una técnica de animación común en la que el texto parece estar escrito. Para lograr el efecto, nos dirigimos a SVG. Para empezar, crearemos el SVG. Hay dos enfoques aquí: convertir el texto en rutas para animarlas o usar texto SVG. Ambos enfoques tienen sus pros y sus contras.
Comience por crear nuestra animación de fotogramas clave. La única función que necesitamos que realice es cambiar el golpe-dashoffset . Ahora que hemos creado nuestra animación, debemos aplicar los valores de los que queremos animar. Establecemos la línea de trazo-trazo , que creará brechas en el trazo. Queremos configurar nuestro trazo para que sea un valor lo suficientemente grande como para cubrir todo el elemento, finalmente compensando el guión por la longitud del trazo.
La magia pasa cuando aplicamos nuestra animación. Al animar el desplazamiento, traemos el trazo a la vista, creando un efecto de dibujo. Queremos que los elementos se dibujen uno a la vez, con cierta superposición entre el final del dibujo de un elemento y comenzar a dibujar el siguiente. Para lograr esto, recurrimos a Sass / SCSS y nth-of-type para retrasar cada letra por la mitad de la animación, multiplicada por la posición de esa letra en particular.
04. aves voladoras
- Como se ve en: Fournier Père et Fils
- Ver el código para un solo pájaro o el rebaño entero
Comenzamos con líneas vectoriales completamente rectas, dibujando cada fotograma de nuestra animación, representando al ave en un estado de vuelo diferente. Luego manipulamos los puntos del vector y redondeamos las líneas y los bordes. Finalmente, colocamos cada marco en una caja del mismo tamaño y los colocamos uno al lado del otro. Exportar el archivo como un SVG.
La configuración de HTML es realmente simple. Solo necesitamos envolver cada ave en un contenedor para aplicar múltiples animaciones, una para hacer que la ave vuele y la otra para moverla a través de la pantalla.
<div class="bird-container">
<div class="bird"></div>
</div>Aplicamos nuestro SVG de aves como fondo a nuestra división de aves y elegimos el tamaño que queremos para cada fotograma. Usamos el ancho para calcular aproximadamente la nueva posición de fondo. El SVG tiene 10 celdas, por lo que multiplicamos nuestro ancho por 10 y luego modificamos el número ligeramente hasta que se vea correcto.
.bird {
background-image: url('bird.svg');
background-size: auto 100%;
width: 88px;
height: 125px;
will-change: background-position;
}
@keyframes fly-cycle {
100% {
background-position: -900px 0;
}
}La animación CSS tiene un par de trucos que quizás no conozcas. Podemos usar la función de tiempo de animación para mostrar la imagen en pasos, como pasar por las páginas de un cuaderno para aludir a la animación.
animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: -0.5s;Anuncio
Ahora que hemos creado nuestro ciclo de moscas, nuestro pájaro actualmente está batiendo sus alas pero no va a ninguna parte. Para moverla a través de la pantalla, creamos otra animación de fotograma clave. Esta animación moverá el ave a través de la pantalla horizontalmente mientras también cambia la posición vertical y la escala para permitir que el ave serpentee de forma más realista.
Una vez que hemos creado nuestras animaciones, simplemente necesitamos aplicarlas. Podemos crear múltiples copias de nuestro pájaro y aplicar diferentes tiempos de animación y retrasos.
.bird--one {
animation-duration: 1s;
animation-delay: -0.5s;
}
.bird--two {
animation-duration: 0.9s;
animation-delay: -0.75s;
}05. Hamburguesa
- Como se ve en: Better Brand Agency
- Ver el código para los spans y SVG.
Esta animación se utiliza en toda la web, convirtiendo tres líneas en un icono de cruz o cierre. Hasta hace poco, la mayoría de las implementaciones se han logrado utilizando elementos HTML, pero en realidad SVG es mucho más adecuado para este tipo de animación: ya no es necesario inflar el código de sus botones con varios tramos.
Debido a la naturaleza animable y SVG y su DOM navegable, el código para realizar la animación o la transición cambia muy poco, la técnica es la misma.
Comenzamos creando cuatro elementos, ya sea que se extiendan dentro de un div o caminos dentro de un SVG. Si estamos usando spans, necesitamos usar CSS para posicionarlos dentro de la div; Si estamos usando SVG, esto ya está resuelto. Queremos colocar las líneas 2 y 3 en el centro, una encima de la otra, mientras espaciamos las líneas 1 y 4 uniformemente arriba y abajo, asegurándonos de centrar el origen de la transformación.
Vamos a confiar en la transición de dos propiedades: la opacidad y la rotación. En primer lugar, queremos desvanecer las líneas 1 y 4, a las que podemos apuntar utilizando el selector : nth-child .
.menu-icon.is-active {element-type}:nth-child(1),
.menu-icon.is-active {element-type}:nth-child(4) {
opacity: 0; }Lo único que queda por hacer es apuntar a las dos líneas centrales y rotarlas 45 grados en direcciones opuestas.
.menu-icon.is-active {element-type}:nth-child(2) {
transform: rotate(45deg); }
.menu-icon.is-active {element-type}:nth-child(3) {
transform: rotate(-45deg); } 06. Persiguiendo círculos
- Como se ve en: Better Brand Agency
- Ver el codigo
El icono de carga animado se compone de cuatro círculos. Los círculos no tienen relleno, pero tienen colores de trazo alternos.
<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
<circle cx="170" cy="170" r="160" stroke="#E2007C"/>
<circle cx="170" cy="170" r="135" stroke="#404041"/>
<circle cx="170" cy="170" r="110" stroke="#E2007C"/>
<circle cx="170" cy="170" r="85" stroke="#404041"/>
</svg>En nuestro CSS, podemos establecer algunas propiedades básicas para todos nuestros círculos y luego usar el selector : nth-of-type para aplicar un trazo-tablero diferente a cada círculo.
circle:nth-of-type(1) {
stroke-dasharray: 550;
}
circle:nth-of-type(2) {
stroke-dasharray: 500;
}
circle:nth-of-type(3) {
stroke-dasharray: 450;}
circle:nth-of-type(4) {
stroke-dasharray: 300;
}A continuación, necesitamos crear nuestra animación de fotogramas clave. Nuestra animación es realmente simple: todo lo que tenemos que hacer es girar el círculo 360 grados. Al colocar nuestra transformación en la marca del 50% de la animación, el círculo también volverá a su posición original.
@keyframes preloader {
50% {
transform: rotate(360deg);
}
}Con nuestra animación creada, ahora solo tenemos que aplicarla a nuestros círculos. Establecemos el nombre de la animación; duración; Cuenta de iteración y función de temporización. La «facilidad de entrada» dará a la animación una sensación más lúdica.
animation-name: preloader;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;En este momento, tenemos nuestro cargador, pero todos los elementos giran juntos al mismo tiempo. Para solucionar esto, aplicaremos algunos retrasos. Crearemos nuestros retrasos utilizando un Sass para bucle.
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
animation-delay: #{$i * 0.15}s;
} }Debido a los retrasos, nuestro círculo ahora se anima a su vez, creando la ilusión de los círculos persiguiéndose unos a otros. El único problema con esto es que cuando la página se carga por primera vez, los círculos son estáticos, luego comienzan a moverse, uno a la vez. Podemos lograr el mismo efecto de compensación, pero detenemos la pausa no deseada en nuestra animación simplemente estableciendo los retrasos en un valor negativo.
animation-delay: -#{$i * 0.15}s;07. Acordeón retro cliqueable.
- Como se ve en: varios
El diseñador de interfaces belga y el engañador de CSS Benjamin de Cock nos muestra cómo utilizar el poder de CSS3 para crear un acordeón animable, centrado automáticamente.
Usaré un código HTML5 simple y muerto para este acordeón. Básicamente, cada sección del acordeón es un elemento de sección (tiene sentido, ¿no es así?) Y contiene un título y un párrafo.
<div>
<section>
<h1>Introduction</h1>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<h1>General information</h1>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<h1>Contact us</h1>
<p>Lorem ipsum dolor sit amet...</p>
</section>
</div>La idea es envolver los títulos de las secciones en anclajes que se vinculen a sí mismos. Dado que: target nos permite seleccionar el elemento de destino, también se nos permitirá seleccionar el elemento que lo sigue con el selector de hermanos adyacente. Vamos a intentar eso. Aquí está el marcado HTML modificado:
<div>
<section>
<a href="#intro" id="intro">
<h1>Introduction</h1>
</a>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<a href="#info" id="info">
<h1>General information</h1>
</a>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<a href="#contact" id="contact">
<h1>Contact us</h1>
</a>
<p>Lorem ipsum dolor sit amet...</p>
</section>
</div>Y aquí está el CSS increíblemente simple para obtener el primer comportamiento de conmutación:
p {
display:none;
}
:target + p {
display:block;
}Empezaré por centrar el acordeón tanto horizontal como verticalmente. El modelo flexbox es el método de posicionamiento perfecto para ese tipo de efecto, ya que nos permite mostrar un elemento siempre en el centro de un bloque (aquí: la página) sin especificar ninguna dimensión. Usaré las notaciones estándar para este tutorial, pero no olvide usar los prefijos de proveedores en su código final.
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
display:box;
box-orient:vertical;
box-pack:center;
box-align:center;
/* For Firefox */ width:100%;
}
div {
width:250px;
}Centrado, pero todavía bastante terrible visualmente. Añadiendo más sensualidad CSS:
body {
font:.7em/1.5 "lucida grande", arial, sans-serif;
background:#f3faff;
}
div {
background:#fff;
border-radius:5px;
box-shadow:0 1px 3px rgba(0,0,0,.3);
}
h1 {
font-size:1em;
}
a {
display:block;
height:23px;
line-height:23px;
background:linear-gradient(#eee, #ccc);
color:#333;
text-decoration:none;
text-align:center;
text-shadow:0 1px 0 rgba(255,255,255,.5);
border-bottom:1px solid #aaa;
}
#intro {
border-radius:2px 2px 0 0;
}
#contact {
border-radius:0 0 3px 3px;
}
a:hover, a:focus {
opacity:.9;
}
a:active {
background:linear-gradient(#ccc, #ddd);
color:#000;
}Woot! Se ve funcional y sexy por ahora. En cuanto a mis necesidades, ya casi estoy allí. Sólo falta la parte animada en realidad. Malas noticias: agregar esas transiciones no es tan fácil.
El problema principal es que, obviamente, no puede realizar transiciones en una propiedad como la pantalla, por lo que tendrá que usar valores numéricos. Entonces, en lugar de ocultar y mostrar las secciones con visualización, usaré la propiedad height para cambiar de 0 a la altura del contenido.
Segunda mala noticia: actualmente no puede realizar una transición entre un valor numérico y «auto». Eso significa que tendré que especificar una altura para cada sección manualmente. Por lo que puedo decir, esto es algo que el W3C conoce y están de acuerdo en que debería ser posible. Espero que los proveedores de navegadores implementen eso: sería muy útil. Aquí está el código final:
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
display:box;
box-orient:vertical;
box-pack:center;
box-align:center;
font:.7em/1.5 "lucida grande", arial, sans-serif;
background:#f3faff;
/* For Firefox */ width:100%;
}
div {
width:250px;
background:#fff;
border-radius:5px;
box-shadow:0 1px 3px rgba(0,0,0,.3);
}
p {
height:0;
padding:0 15px;
overflow:hidden;
transition:height .4s ease-out, padding .4s ease-out;
}
h1 {
font-size:1em;
}
a {
display:block;
height:23px;
line-height:23px;
background:linear-gradient(#eee, #ccc);
color:#333;
text-decoration:none;
text-align:center;
text-shadow:0 1px 0 rgba(255,255,255,.5);
border-bottom:1px solid #aaa;
}
#intro {
border-radius:2px 2px 0 0;
}
#contact {
border-radius:0 0 3px 3px;
}
a:hover, a:focus {
opacity:.9;
}
a:active {
background:linear-gradient(#ccc, #ddd);
color:#000;
}
:target + p {
padding:10px 15px;
border-bottom:1px solid #ccc;
}
#intro:target + p {
height:70px;
}
#info:target + p {
height:230px;
}
#contact:target {
border-radius:0;
}
#contact:target + p {
height:180px;
}
08. nevando
- Como se ve en: USA Today
- Ver el codigo
La nieve se crea utilizando un SVG y la técnica es muy similar a la forma en que creamos las burbujas anteriormente. Para comenzar, creamos dos capas de círculos dentro de un SVG, luego animamos esas dos capas traduciendo el valor de Y con una animación de fotograma clave.
Aplicamos la animación a cada capa en lugar de elementos individuales y reutilizamos la misma animación para ambas capas. Simplemente dándoles diferentes duraciones, podemos agregar algo de profundidad a nuestra escena.
09. Fondo en movimiento
- Como se ve en: Un acto violento
- Ver el codigo
El sitio web A Violent Act utiliza enmascaramiento y movimiento sutil para captar la atención del usuario. La mayoría del trabajo aquí está en la configuración y creación del SVG.
10. Transiciones coloridas
El sitio web DaInk utiliza una técnica realmente efectiva para la transición entre páginas. La transición es simple y consiste en un SVG que contiene una cantidad de rectángulos de diferentes tamaños de diferentes colores colocados uno encima del otro.
La animación consiste en transformar la posición X por el ancho del SVG. Luego, utilizando nth-of-type , aplicamos retrasos, compensando cada uno en 75 ms desde el último para crear una transición suave.
11. letras que aparecen al azar
- Como se ve en: Disidencia Nuclear
Jam3 usó JavaScript y CSS para crear una superposición de contenido animado para un fondo de video de pantalla completa en su sitio Nuclear Dissent.
Para copiar esta animación CSS, el primer paso es iniciar la estructura del documento HTML. Consiste en el contenedor de documentos que almacena las secciones de cabeza y cuerpo. Mientras que la sección principal se usa para cargar los recursos de CSS y JavaScript externos, el cuerpo contendrá el contenido de la página visible creado en el siguiente paso.
El contenido de la página de primer plano se coloca dentro del contenedor principal para brindar la ventaja de un control fácil del flujo de contenido. El elemento de texto tiene la clase de superposición aplicada para que el JavaScript y CSS puedan hacer referencia a la aplicación de la animación de texto. Múltiples elementos pueden tener la animación aplicada usando la clase de superposición .
<main>
<h2 class="overlay">
This is a story all about how...
</h2>
</main>La parte final del HTML es definir el elemento de video de fondo. No todos los navegadores son compatibles con cada estándar de video, por lo que es necesario especificar diferentes fuentes. El navegador mostrará la primera fuente que puede admitir. Tome nota de cómo el elemento de video tiene los atributos de reproducción automática , silencio y bucle aplicados para que se reproduzca y repita automáticamente sin sonido.
<video autoplay muted loop>
<source src="https://techslides.com/
demos/sample-videos/small.webm" type="video/
webm" />
<source src="https://techslides.com/
demos/sample-videos/small.mp4" type="video/
mp4" />
<source src="https://techslides.com/
demos/sample-videos/small.ogv" type="video/
ogg" />
<source src="https://techslides.com/
demos/sample-videos/small.3gp" type="video/3gp"
/>
</video>Crea un nuevo archivo llamado styles.css . El primer paso en este archivo es definir las propiedades del contenedor de contenido principal . Las configuraciones predeterminadas de fuente y color se aplican para heredar el contenido secundario. Los valores automáticos se aplican a los márgenes laterales para que el contenido secundario aparezca alineado centralmente.
main {
font-family: Helvetica, sans-serif;
color: #fff;
padding: 2em;
width: 75%;
min-height: 100vh;
margin: 0 auto 0 auto; }El elemento de fondo requiere un estilo específico para que el efecto funcione. En primer lugar, el posicionamiento fijo es importante para garantizar que permanezca en la misma posición si el usuario desplaza la página. En segundo lugar, debe usar un índice z negativo que garantice su posición debajo del contenido de la página principal. La transformación y el tamaño también se utilizan para establecer el tamaño y la ubicación del elemento para cubrir la ventana de página completa.
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -9999;
transform: translateX(-50%)
translateY(-50%);
background: #000; }El elemento de superposición será manipulado por JavaScript para dividir cada letra de su contenido de texto para que sea envuelto por una etiqueta span. Esto permite animar letras individuales a través de CSS. En primer lugar, las configuraciones predeterminadas para las letras de intervalo se definen para tener un posicionamiento relativo, opacidad invisible y una animación animado de superposición aplicada . En segundo lugar, un retraso en su animación se aplica en función de la posición de su hijo.
.overlay span{
position: relative;
opacity: 0;
top: 1em;
animation: animateOverlay 1s ease-in-
out forwards;
}
.overlay span:nth-child(4n) { animation-delay:
0s; }
.overlay span:nth-child(4n+1) { animation-
delay: 1s; }
.overlay span:nth-child(4n+3) { animation-
delay: 2s; }
.overlay span:nth-child(4n+2) { animation-
delay: 3s; }
La animación aplicada a cada elemento de tramo consta de un solo fotograma hacia el que se animarán los elementos. Esto establece su opacidad para que sea completamente visible, junto con su posicionamiento vertical para animar hacia su posición de flujo de texto predeterminada. Tome nota de cómo el paso 6 establece cada elemento span para que sea empujado hacia abajo por 1em.
@keyframes animateOverlay {
to {
opacity: 1;
top: 0;
} }Crear un nuevo archivo llamado code.js . Este primer paso buscará todos los elementos utilizando la clase de superposición , de los cuales se utiliza un bucle for para aplicar el código más adelante. Estos elementos no están disponibles hasta después de que la página se haya cargado, por lo que deben colocarse dentro de un detector de eventos en la ventana del navegador que se activa al finalizar la carga.
indow.addEventListener("load", function(){
var nodes = document.
querySelectorAll(".overlay");
for(var i=0; i<nodes.length; i++){
}
});
Cada elemento que se encuentra aquí debe tener su contenido HTML redefinido para que cada letra esté dentro de un elemento span. Esto se logra al leer su texto sin formato usando innerText , y luego usar un segundo bucle for para agregar individualmente cada letra a la nueva versión del HTML, completa dentro de su etiqueta span. Después de leer cada letra, el innerHTML del nodo principal se actualiza con el nuevo HTML.
var words = nodes[i].innerText;
var html = "";
for(var i2=0; i2<words.length; i2++){
if(words[i2] == " ")html +=
words[i2];
else html +=
"<span>"+words[i2]+"</span>"
}
nodes[i].innerHTML = html;12. círculos pulsantes
- Como se ve en: PeekaBeat
- Ver el codigo
La animación de pulsos utilizada en el sitio web de Peek-a-Beat es simple pero efectiva y no es difícil de reproducir. Se compone de tres círculos dentro de un SVG: simplemente animamos su escala y opacidad.
13. destacando la expansión
- Como se ve en: Heartbeat
- Ver el codigo
Esta es una técnica muy simple, pero muy efectiva. La transición se realiza usando el pseudoelemento :: before . Para empezar, el pseudo elemento se coloca en la parte inferior mientras abarca todo el ancho, pero solo unos pocos píxeles de altura.
Cuando se interactúa con el elemento, el ancho y la altura del pseudoelemento pasan al 105% del tamaño del padre (el cambio es mucho más dramático verticalmente), así como a la transición del color del texto.
14. Título elevado.
- Como se ve en: Correspondencias de conjunto
- Ver el codigo
Ensemble Correspondances usa una animación simple para transmitir movimiento en la música. El diseño representa libremente partituras.
15. Icono de menú giratorio.
- Como se ve en: Coulee Creative
- Ver el codigo
El botón de menú animado se crea utilizando un SVG. La animación se produce cuando el usuario interactúa con el botón de menú. Se producen dos transiciones: el grupo circular alrededor del menú gira 360 grados y el icono del menú en el centro cambia de color.
La parte más complicada es la función de temporización. Al utilizar cubic-bezierpara obtener un control completo, podemos comenzar la animación lentamente, correr a través de la parte media y ralentizarla de nuevo al final.
16. Subrayado desde el centro.
- Como se ve en: God of War
- Ver el codigo
La animación consiste en colocar el :: después del pseudo-elemento en la parte inferior y luego escalarlo cuando se interactúa con el botón.
17. Ampliando las esquinas.
- Como se ve en: Auditorio Princesa Alexandra
- Ver el codigo
El sitio web del auditorio Princess Alexandra tiene una forma visual de mostrar las categorías de sus espectáculos. Cada una de las tarjetas de presentación tiene una esquina triangular configurada en un color que representa la categoría y luego, al pasar el mouse, se muestra el nombre de la categoría.
El efecto se logra utilizando los pseudo elementos :: before y :: after , haciendo la transición del tamaño del triángulo y difuminando el nombre cuando se interactúa con el elemento.
18. Flecha deslizante
- Como se ve en: Biblioteca de Greenwich
- Ver el codigo
La biblioteca de Greenwich tiene una transición realmente interesante en sus botones. Cuando se interactúa con el botón, suceden dos cosas: la parte de texto del botón está cubierta y la flecha se anima en el lado derecho del botón y se vuelve a introducir desde la izquierda.
La transición de color se realiza con la propiedad de transición y la flecha mediante una animación simple de fotogramas clave. Tanto la transición como la animación utilizan la misma duración para sincronizar los movimientos.
