¿Alguna vez te has preguntado como se hace para animar los elementos dentro de una página web?
Os traigo unos ejemplos de animaciones en CSS muy fáciles de implantar en vuestro diseño web. Son animaciones de entrada, lo que significa que aparecerán con una animación cuando se descienda por el contenido de la página web hasta llegar al objeto con la animación.

A continuación puedes ver unos ejemplos:

Animaciones de Entrada

deslizarArriba ↑ deslizarAbajo ↓ deslizarIquierda ← deslizarDerecha → deslizarExpander ↑ expandir ↑ crecerAparecer aparecer granEntrada girar

animaciones css

¿Como funciona?

Tan solo necesitas realizar 4 pasos que detallo a continuación para tener estas animaciones en tu diseño web.

Usando JavaScript o JQuery se puede hacer que un elemento aparezca en pantalla después de haber hecho scroll hacia abajo. Este efecto recibe el nombre de scroll-event debido a que usa este método para su funcionamiento. En este caso no es necesario que sepas programar ni en JavaScript ni en JQuery tan solo necesitas conocer conceptos básicos de CSS y HTML.

Las animaciones están hechas con la función de CSS3 @keyframes y funcionan con todos los navegadores modernos, desde Internet Explorer 10 en adelante. En navegadores más antiguos el elemento se mostrará pero sin la animación correspondiente en el diseño web.

Su funcionamiento es tan fácil como añadir una de estas clases a tu elemento:

  • deslizarAbajo
  • deslizarArriba
  • deslizarIquierda
  • deslizarDerecha
  • deslizarExpander
  • expandir
  • crecerAparecer
  • aparecer
  • granEntrada
  • girar

El uso de estas animaciones es muy sencillo, tan solo tienes que incluir el archivo CSS que te facilito en tu página web y asignar las clases correspondiente a la animación a los objetos que quieras animar. Así de sencillo.

A continuación te detallo los 4 pasos:

1º – Añade el archivo CSS con las animaciones.

Añade el archivo CSS a la cabecera de tu página

<link rel="stylesheet" href="css/animaciones-CSS.css">

2º – Añade la clase de la animación al objeto que desees animar

Puedes utilizar cualquier ID pero inicialmente debe tener la propiedad CSS: visibility: hidden; para que se pueda cambiar al llegar a su posición en pantalla.

<div id="objeto" class="deslizarArriba">
 <!-- Todo lo que esté en este div tendrá animación -->
 </div>

3º – Añade JQuery a tu página web

Inserta este trozo de código entre las cabeceras de tu página web para poder utilizar sentencias JQuery.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

4ª – Añade el código de JQuery

Puedes cambiar #objeto por cualquier #id de los elementos de tu diseño web. También puedes cambiar “deslizarArriba” por cualquier clase expuesta más arriba para hacer que el objeto aparezca y la animación correspondiente comience cuando se alcance su posición en pantalla.

<script>
 $(window).scroll(function() {
   $('#objeto').each(function(){ 
     var imagePos = $(this).offset().top;
     
     var topOfWindow = $(window).scrollTop(); 
     if (imagePos < topOfWindow+400) {
       $(this).addClass("deslizarArriba"); 
     } 
   });
 });
 </script>

Para descargar el archivo CSS que contiene las animaciones debes realizar una acción social a continuación.
Además si tienes cualquier tipo de problema a la hora de hacer funcionar estas animaciones en tu diseño web no dudes en ponerte en contacto conmigo, intentaré ayudarte en todo lo que me sea posible. Puedes hacerlo a través de las redes sociales o en el correo juanulisespv@exponencial.es

[signinlocker id=3223]
Descargar Archivo CSS
[/signinlocker]