En la entrada anterior hablamos sobre como preparar un codigo javascript para animar contenido html cuando este es visualizado en pantalla. En esta entrada vamos a continuar esta pequeña serie, con la parte correspondiente al estilo. Ademas de ver la manera en la que podemos expandirlo. Basandonos en la continuacion de esta serie, aqui les entrego el estilo para la animacion para usar en cualquier contenido en tu pagina.
<style>
@keyframes scaleup {from {transform: scale(.7,.7)}}
.scale-up-element {animation: scaleup 1.4s 0s;}
.hiddens{opacity: 0;}
</style>Con este pequeño estilo podemos ir a cualquier contenido html que deseen animar y agregaremos la clase «scale-on-scroll» que declaramos en la entrada Animar HTML con Javascript y CSS. aqui esta el resultado final, en el video hay otras animaciones que vamos a presentar mas abajo. Tambien veremos como expandir las opciones.
Si deseas usar este estilo usando javascript, lo podras hacer siguiendo este tutorial, Animar HTML con Javascript y CSS, el cual contiene lo necesario en javascript para ejecutar estos estilos.