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 .
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.
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í .
