Tontería con nth-child, transition y rotate

Ayer en lugar de publicar algo me puse a experimentar un poco con CSS. Al final me salió esta cosa que como reza el título para que nadie se lleve a engaños, es una tontería que sólo sirve para pasar el rato y quizás para algún tipo de rótulo muy específico, pero me ha gustado el resultado como demostración.

La cosa va de transiciones sobre rotación y opacidad aplicadas sobre un texto al hacer hover. Básicamente, el HTML lo que hace es asignar una clase y luego mediante etiquetas span, separar los distintos grupos de caracteres que vamos a ir animando. Por un lado una frase de dos palabras y por otro los caracteres individuales de una tercera: HOVER AQUÍ / O / L / O / B / L / O / G / G / E / R. Puro ombliguismo, oiga.

<div class="rotulo">
<span>Hover aquí</span><span>O</span><span>l</span><span>o</span><span>b</span><span>l</span><span>o</span><span>g</span><span>g</span><span>e</span><span>r</span></div>

Este sería el resultado y ahora vemos el CSS.

Hover aquíOloblogger

Tener esos caracteres delimitados por separado con etiquetas span, nos va a permitir controlarlos también de manera separada. Para eso usaremos :nth-child(n), una pseudoclase que nos permite atacar individualmente el elemento n de una serie.

En este caso la serie será la de los distintos span que hemos montado dentro de la capa con clase .rotulo:

• .rotulo span:nth-child(1) {...}
• .rotulo span:nth-child(2) {...}
• etc

Los números entre paréntesis hacen referencia al ordinal de los diferentes span que el intérprete se va encontrando bajo la clase rotulo. En el ejemplo el 1 se corresponderá con "Hover aquí", el 2 con la "O", el 3 con la "L" y así sucesivamente.


Otra cosa que también se usa es opacity, de manera que en el estado normal cada span tendrá un valor 1 ó 0 según queramos que inicialmente se vea o no. Evidentemente, en el estado :hover tendrá el valor contrario para que desaparezca o aparezca respectivamente.

Para que el cambio sea suave con estados intermedios añadimos también un transition, al que adicionalmente le damos unos tiempos propicios para que haya una pequeña demora entre la aparición de un span y el siguiente, de manera que aparezcan progresivamente uno tras otro.

Por último hay un transform: rotate de 360º para que las letras que aparecen sueltas lo hagan "rodando".

¿Me compliqué con la explicación? Pues entonces echa un vistazo al CSS comentado a ver si ahí se aprecia mejor cómo se hace esto y para qué sirve cada parte...

/* Contenedor general */
.rotulo { position: relative; overflow: hidden;
background: #000; height: 80px; color: #fff; }

/* Span's inicialmente ocultos */
.rotulo span { opacity: 0; position: absolute;
font-family: Arial, sans-serif; font-size:50px; padding: 10px; text-transform: uppercase; }

/* 1º span sí lo mostramos y su transición se demora 0.5 seg. */
.rotulo span:nth-child(1) { opacity: 1; left: 100px; transition: all .4s ease .5s; }
/* La transición del resto se inicia escalonadamente */
.rotulo span:nth-child(2) { transition: all .3s ease; }
.rotulo span:nth-child(3) { transition: all .3s ease .2s; }
.rotulo span:nth-child(4) { transition: all .3s ease .4s; }
.rotulo span:nth-child(5) { transition: all .3s ease .6s; }
.rotulo span:nth-child(6) { transition: all .3s ease .7s; }
/* Los últimos 5 caracteres aparecen a la vez */
.rotulo span:nth-child(7),
.rotulo span:nth-child(8),
.rotulo span:nth-child(9),
.rotulo span:nth-child(10),
.rotulo span:nth-child(11) { transition: all .3s ease .8s; }

/* Todos visibles y rotando al hacer hover */
.rotulo:hover span { opacity: 1; transform: rotate(360deg); }

/* 1º hace lo contrario, desaparece hacia la derecha y no rota */
.rotulo:hover span:nth-child(1) { opacity: 0; left: 9999px; transform: rotate(0deg); transition: all .5s; }

/* Distancia progresiva para que no se solapen los caracteres */
.rotulo:hover span:nth-child(2) { left: 40px; }
.rotulo:hover span:nth-child(3) { left: 90px; }
.rotulo:hover span:nth-child(4) { left: 130px; }
.rotulo:hover span:nth-child(5) { left: 180px; }
.rotulo:hover span:nth-child(6) { left: 230px; }
.rotulo:hover span:nth-child(7) { left: 270px; }
.rotulo:hover span:nth-child(8) { left: 320px; }
.rotulo:hover span:nth-child(9) { left: 370px; }
.rotulo:hover span:nth-child(10) { left: 420px; }
.rotulo:hover span:nth-child(11) { left: 470px;}

Si lo vais a utilizar y queréis máxima compatibilidad, los transition y transform hay que repetirlos con todos los prefijos para los distintos navegadores. Por ejemplo, el primero que se usa quedaría así:

.rotulo span:nth-child(1) { opacity: 1; left: 100px;
-webkit-transition: all .4s ease .5s;
-moz-transition: all .4s ease .5s;
-o-transition: all .4s ease .5s;
-ms-transition: all .4s ease .5s;
transition: all .4s ease .5s;

}

En este Dabblet podéis encontrar el código completo.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter