Animaciones con JavaScript

Para crear un sitio web llamativo, sin sacrificar su usabilidad y funcionalidad, podemos usar efectos o animaciones realizadas en JavaScript.
Para  iniciar recomiendo conocer más sobre los eventos de JS . En esta publicación presentaré dos tipos: onmouseenter y onmouseleave .
A continuación un ejemplo de navegación sencilla: u n elemento subirá pausadamente y mostrará una breve descripción.
Para empezar, el HTML se crea a sà :
Como puede observarse hay dos eventos: onmouseenter  y onmouseleave .
El onmouseenter detecta cuando el mouse ingresa al elemento donde se ha declarado el evento y ejecuta la función inover.Â
De manera similar, el evento onmouseleave detecta cuando el mouse sale del elemento y  ejecuta la función outover .
Definición de las funciones inover y outover
Las funciones inover y outover se definen de la siguiente manera:Â Â
En primer lugar, la función inover recibe el elemento con la clase title-project como parámetro y lo añade a la clase start .
Después, la función frame es llamada en intervalos de tiempo definidos con el método setInterval. Ello con el fin de sumar 2px a la posición que tiene title-project start .
Por su parte, la función frame es llamada hasta que la posición de title-project start es 176px y se muestra la información que contiene el title-project.
Cuando la posición es igual a 176 px , se pide al método clearTimeout detener la ejecución del marco dentro del SetInterval.
Por otro lado, la función outover recibe el elemento de title-project start como un parámetro y elimina la clase de start.
Luego llama al método clearTimeout para evitar la función frame y devuelve la posición del elemento a 0px a su estado original.Â
Finalmente, el CSS  es usado para crear los estilos iniciales:
En este caso CSS se utiliza para definir el tamaño de fuente, el color de fondo y la altura del contenedor.
Dichas propiedades se aplican al contenedor con col-sm-4, CSS, de la siguiente manera:
Esto es para evitar que el contenedor muestre la animación sin terminar.Â
Conclusión:
Hacer una animación en JavaScript es fácil. Sin embargo, los muchos dispositivos móviles en el mercado, exigen crear para tamaños de pantalla distintos. Â
En conclusión, aunque esta publicación solo discutió los eventos de onmouseenter y onmouseleave, JavaScript tiene una larga lista que ayuda a crear di stintas animaciones.Â
En la entrada del próximo blog veremo s la misma animación, pero con CSS3.
Para ver el resultado de esta animación puedes ir aquà .