Efecto hover animación html5: texto que bota

Vamos a ver un curioso efecto hover, y ya de paso explico el método de hacer animaciones lineales gracias a css3. Ya veremos más adelante cómo lograr otro tipo de animaciones, pero por ahora con esta podremos ir cogiendo la base para el resto.

El efecto consiste en una imagen, de la que al pasar el ratón por encima caiga un texto por la parte superior y rebote varias veces antes de estabilizarse. En realidad no difiere mucho de otros efectos hover vistos hasta ahora, más concretamente del efecto aparición texto con html5 (algún post anterior). Como siempre, vamos a ver primero el código fuente html:

<div class="general">
   <img src="../../../imagenes/iconos/html5_y_css3.png" />
   <div class="mascara">
      <p>Tutorial de: www.todocursosonline.es</p>
   </div>
</div>

Seguimos entonces teniendo una capa general que es la que contendrá a las demás, aunque no vamos a darle formato, es simplemente por organización. Lo siguiente que tenemos es una imagen, que es la que nos invitará a pasar el ratón sobre ella para que así caiga el texto. Pero lo que de verdad interesa es lo siguiente, primero la capa mascara:

.general .mascara {
   top: -200px;
   opacity: 0;
   -webkit-transition: all 0.3s ease-out 0.5s;
   -moz-transition: all 0.3s ease-out 0.5s;
   -o-transition: all 0.3s ease-out 0.5s;
   -ms-transition: all 0.3s ease-out 0.5s;
   transition: all 0.3s ease-out 0.5s;
}
.general:hover .mascara {
   opacity: 1;
   top: 0px;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: bounceY 0.9s linear;
   -moz-animation: bounceY 0.9s linear;
   -ms-animation: bounceY 0.9s linear;
   animation: bounceY 0.9s linear;
}

Explicamos brevemente lo que hemos hecho, que ya está explicado también en otros posts anteriores… La hemos situado 200 pixels por encima de la imagen, para que al pasar el cursor sobre la imagen caiga hasta los 0 pixels de altura (donde tiene que estar). En principio será invisible con el opacity 0 (la capa y lo que ésta contenga, el párrafo en este caso) para hacerse visible después con el opacity 1. Lo único que destaca aquí es el animation: bounceY 0.9s linear, que ya veremos al final del post. Seguimos configurando o estilando el texto (p):

.general p {
   color: #333;
   font-family:cursive;
   font-weight:bold;
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.2s;
   -moz-transition: all 0.2s ease-in-out 0.2s;
   -o-transition: all 0.2s ease-in-out 0.2s;
   -ms-transition: all 0.2s ease-in-out 0.2s;
   transition: all 0.2s ease-in-out 0.2s;
}
.general:hover p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

También sencillo, un color, un tipo de familia, un tipo de letra en negrita, 200 pixels por encima de la capa (400 de la imagen), esto es porque es la capa mascara la que lleva el efecto en sí, por lo que es en esta capa en la que tendrán que caer las letras una vez pasado el ratón, ya que como vemos ésto tarda en caer 0.2 segundos, mientras que la capa máscara cae inmediatamente. Ese va a ser el tiempo con el que vamos a jugar.
Ahora llegamos a la parte novedosa, tenemos que programar la animación para que rebote. Ésto lo haremos de la siguiente manera:

@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
    0% { -moz-transform: translateY(-205px);}
    40% { -moz-transform: translateY(-100px);}
    65% { -moz-transform: translateY(-52px);}
    82% { -moz-transform: translateY(-25px);}
    92% { -moz-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    40% { -webkit-transform: translateY(-100px);}
    65% { -webkit-transform: translateY(-52px);}
    82% { -webkit-transform: translateY(-25px);}
    92% { -webkit-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}

Como vemos, empezamos diciéndole que en el 0% el texto esté en la parte superior de la capa, en el 40% de la animación se desplace hasta la mitad, pero que en el 55% caiga abajo para que después en el 65% vuelva a subir hasta un cuarto de la capa (50px), en el 75% caiga abajo y en el 82% suba desde 0px a 25, en el 87% caiga y en el 92% vuelva a subir… hasta que en el 100% acaba abajo. Si no lo has entendido, vuelve a leerlo más despacio.
Estos valores y porcentajes se pueden modificar a nuestro gusto de rebote, así por ejemplo si lo que queremos es que rebote una vez y después quede en medio, bastaría con hacer algo como:

 
@-webkit-keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    50% { -webkit-transform: translateY(-100px);}
    75% { -webkit-transform: translateY(-0px);}
    100% { -webkit-transform: translateY(-100px);}
}
@keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    50% { -webkit-transform: translateY(-100px);}
    75% { -webkit-transform: translateY(-0px);}
    100% { -webkit-transform: translateY(-100px);}
}
@-moz-keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    50% { -webkit-transform: translateY(-100px);}
    75% { -webkit-transform: translateY(-0px);}
    100% { -webkit-transform: translateY(-100px);}
}

Si quieres ver un ejemplo de cómo quedaría entra en:

Efecto hover de texto que rebota, animacion con css3


Interesante ¿NO?, espero que os haya gustado y espero vuestros comentarios de apoyo…😉
Un saludo. En los próximos posts veremos más animaciones más complejas y bastante más vistosas.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: