Tontería con nth-child, transition y rotate | Oloblogger 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...

9 de mayo de 2012

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.

Transiciones CSS

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
Copy URL

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

follow us in feedly

6 comentarios :

  1. Pues tanto como tontería no lo creo, para hacer un banner animado me parece muy buena idea.
    Lo difícil será tener tiempo para jugar con todas las posibilidades de estilo que se le puedan añadir, pero sin duda es brillante.

    ResponderEliminar
    Respuestas
    1. Apoyo lo que dice El Potro, una alternativa ligera para evitar el peso de un .Gif o de un documento flash.

      Enhorabuena por tu creatividad Oloman :D

      Eliminar
    2. Gracias par de aduladores :)

      Eliminar
    3. (Par de aduladores) JAjajja. :D

      Eliminar
  2. Muy interesante, amigo.
    En IE9, no se aprecia el efecto (¡que novedad!,¿verdad?)se ve como una sencilla sustitución, pero en Firefox se ve bien, y en el Crome aún mejor, con efecto de salida y todo.
    Te felicito.

    ResponderEliminar
    Respuestas
    1. A veces me cansa mencionar lo de que en IE no funcionan las transiciones, pero asi es. Gracias.

      Eliminar