En fin, para empezar este artículo sobre animaciones sobre títulos en CSS3 primero echad un ojo a esta página de ejemplo.Vamos a trabajar para hacer algo similar (bueno, de hecho para hacer ese ejemplo).
Ojo, yo no me he currado el css en este caso, me la encontré mientras me documentaba para otra cosa a través de este artículo, y creo que merece que lo traduzca/explique en castellano.
Años atrás un efecto como este sólo sería posible con Flash, pero ahora podemos hacerlo con la tecnología nativa de los navegadores (bueno, como siempre con la excepción de nuestro querido Internet Explorer, al menos hasta la versión 10). Cierto que en este caso también hay ayuda de un poco de Javascript, no es CSS puro, pero se trata de una simple librería que permitirá trabajar con las letras por separado sin tener que crear nosotros a mano un span para cada una. La biblioteca de JS a utilizar será Lettering.js.
Por tanto vamos primero con el marcado. Crearemos un div para envolverlo todo y meteremos dentro de él todas las frases a usar como títulos de segundo nivel (h2):
</pre>
<div class="hiddenSpellError">class="os-phrases"></div>
<pre></pre>
<h2>Sometimes it's better</h2>
<pre>
<h2>to hide</h2></pre>
<h2>in order to</h2>
<pre>
<h2>survive evil</h2>
<h2>Thanatos</h2>
<h2>This fall</h2>
<h2>Prepare</h2>
<h2>Refresh to replay</h2>
</div>
Ok, ya tenemos el marcado. Como dije antes, toca meter una línea de javascript (en este caso, con jQuery además)
$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();
Esto lo que hará será, primero, separar cada título en palabras y cada palabra en letras, y además cada letra está metida en dos span distintos con la misma clase. En la página original podéis ver un ejemplo de cómo sería hacer eso codeándolo a mano.
Muy bien, ya tenemos la parte de marcado lista, a base tanto de código manual como de javascript para facilitar las tareas. Toca ponerse manos a la obra con el CSS.
Lo primero será lograr que nuestros títulos ocupen el 100% de la página, posicionado de forma absoluta, en mayúsculas y bien tocho:
.os-phrases h2 {
font-family: 'Dosis', 'Lato', sans-serif;
font-size: 70px;
font-weight: 200;
height: 100%;
width: 100%;
overflow: hidden;
text-transform: uppercase;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
letter-spacing: 14px;
text-align: center;
}
Right now! Este paso ya está listo, el título es bien tochaco. Eso sí, podría pasar que no se ajustase bien a todos los tamaños de pantalla, así que vamos a usar flexbox para solucionarlo.
.os-phrases h2,
.os-phrases h2 > span {
height: 100%;
/* Centrando con flexbox */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
El siguiente paso es meter espaciado entre palabras:
.os-phrases h2 > span {
margin: 0 15px;
}
Y ahora vamos a ver el por qué de los dos span para cada letra. Al primero de ellos le vamos a aplicar perspectiva:
.os-phrases h2 > span > span {
display: inline-block;
perspective: 1000px;
transform-origin: 50% 50%;
}
Las letras en si serán transparentes y les meteremos una animación, que durará 5.2 segundos.
.os-phrases h2 > span > span > span {
display: inline-block;
color: hsla(0,0%,0%,0);
transform-style: preserve-3d;
transform: translate3d(0,0,0);
animation: OpeningSequence 5.2s linear forwards;
}
Con esto ya ves la lógica del doble span.
Una vez tenemos la orientación de las letras toca definir los delays de las frases. La quinta frase, la que es el título de la «película imaginaria» tendrá un delay especial, aparecerá más lentamente. En cambio las secuencias 6 y 7 irán más rápido.
.os-phrases h2:nth-child(2) > span > span > span {
animation-delay: 5s;
}
.os-phrases h2:nth-child(3) > span > span > span {
animation-delay: 10s;
}
.os-phrases h2:nth-child(4) > span > span > span {
animation-delay: 15s;
}
.os-phrases h2:nth-child(5) > span > span > span {
font-size: 150px;
animation-delay: 21s;
animation-duration: 8s;
}
.os-phrases h2:nth-child(6) > span > span > span {
animation-delay: 30s;
}
.os-phrases h2:nth-child(7) > span > span > span {
animation-delay: 34s;
}
Antes de meternos con la última frase, que tendrá un tratamiento más especial, toca definir cómo se comportarán las letras durante la animación (es decir, cómo va evolucionando la separación, la opacidad, etc durante la animación):
@keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0.2;
transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
transform: translateZ(130px);
pointer-events: none;
}
}
Ok, con esto ya tenemos todo lo relativo a todas las frases… menos la última, que ya dijimos que tendría un tratamiento especial, ya que la animación será distinta al resto, usando en este caso un fundido:
.os-phrases h2:nth-child(8) > span > span > span {
font-size: 30px;
animation: FadeIn 4s linear 40s forwards;
}
@keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
Y ahora pensarás «¿No había algunas palabras destacadas?». Y tienes razón, algunas estaban en negrita. Pero tranqui, eso lo arreglamos con esta última línea, donde aplicamos la negrita a ciertas palabras concretas:
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
font-weight: 600;
}
En fin, ya ves que es un pelín tocho el código pero que tampoco come a nadie, y se logra un resultado muy espectacular. Si no os apetece copiar, el código original está en este enlace.
A la hora de terminar este artículo, la web original estaba en remodelación. Pero echadle un ojo por si acaso porque cuando vuelva a estar activa tiene muchos trucos de diseño web muy interesantes, como todos los que ha colgado la creadora de este efecto Mary Lou.
