Elementos entrando desde arriba con un ligero rebote

Elementos entrando desde arriba con un ligero rebote
  • Eborio Linárez
  • November 20, 2012
  • 0

El efecto que vamos a conseguir es muy básico pero atractivo. Consiste en hacer aparecer los elementos desde arriba y simular un ligero rebote al llegar al fondo del contenedor. Así conseguimos una apariencia visual muy llamativa.

Seguimos como en la mayoría de ejemplos trabajando con el HTML creado en el post HTML y CSS básicos para las transiciones. Ahora veamos el ejemplo finalizado en vivo.

See the Pen Elementos entrando desde arriba con un ligero rebote by Eborio Linárez (@eborio) on CodePen.

Ahora definimos las reglas iniciales para los elementos.

.view .mask { 
    background-color: hsla(0, 0%, 100%, 0.7);
    transform: translateY(-200px);
    opacity: 0;
    transition: all 0.3s ease-out 0.5s;
}
.view h2 {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.1s;
}
.view p { 
    color: #333;
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.2s;
}
.view a.info { 
    transform: translateY(-200px);
    transition:  all 0.2s ease-in-out 0.3s;
}

Todos los elementos se desplazan hacia arriba y se le configuran transiciones. Solo la máscara posee una opacidad de 0 para hacerla invisible.

Luego configuramos las reglas para el hover.

.view:hover .mask { 
    opacity: 1; ;
    transform: translateY(0px);
    transition-delay: 0s;
    animation: bounceY 0.9s linear;
}                                                                                       
.view:hover h2 { 
    transform: translateY(0px);
    transition-delay: 0.4s;
}
.view:hover p {
    transform: translateY(0px);
    transition-delay: 0.2s;
}
.view:hover a.info {
    transform: translateY(0px);
    transition-delay: 0s;
}

La máscara .mask se hace visible y se aplica una nueva regla llamada animation que debe ser utilizada en combinación con @keyframes que configuraremos más adelante. Esta regla nos permite crear animaciones similares a las que podríamos conseguir con Flash o JavaScript.

El valor bounceY será definido más adelante. Podemos darle el nombre que mejor nos parezca, no es obligatorio que se llame bounceY.

Como pudiste apreciar en el ejemplo en vivo, la máscara hace un efecto de rebote y esto se consigue con los @keyframes que procedemos a definir.

@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);}
}

Puedes apreciar que definimos un keyframe llamado bounceY el cual fue utilizado en las reglas configuradas anteriormente. Puedes darle el nombre que tu desees.

Los keyframes reciben varias configuraciones definidas con porcentajes, en cada porcentaje se definen las reglas a aplicar. Debido a que se le aplican desplazamientos en el eje Y el elemento va desplazándose hacia abajo.

La última configuración ocasiona que el elemento genere un rebote. Puedes probar con diferentes valores para ver de que manera se comportan los elementos.

Si deseas mayor información sobre @keyframes puedes visitar el enlace sobre el tema que se encuentra en los enlaces al final del post.

Con esto finalizamos el ejemplo. Recuerda compartirlo en tus redes sociales. Nos vemos en el siguiente.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario