Al crear un sitio web, se pretende que sea llamativo, pero sin sacrificar la usabilidad y la funcionalidad. Para lograr esto, se pueden usar diferentes animaciones o efectos para llamar la atención del usuario. Sin embargo, implementar una animación puede ser limitante; por ejemplo, la gran variedad de dispositivos móviles en el mercado genera la necesidad de implementar sitios web para una gran cantidad de diferentes tamaños de pantalla.

Hacer una animacióne en  JavaScript  en relativamente fácil si eres un principiante. Debe ser considerado que, para empezar, es necsario estar familiarizado con lo básico de JS  events.

Estos eventos permiten detectar cuándo se ha accedido a un contenedor, se ha movido el mouse y el usuario ha hecho clic en un elemento; entre otros. Una vez que ocurre el evento, se ejecuta una sección específica de código, generalmente una función.

En este caso, realizaremos una animación simple: un elemento subirá poco a poco y mostrará una breve descripción cuando el cursor del mouse lo ingrese.

Primero, el HTML necesita ser creado, de la siguiente manera:

Screenshot from 2016-07-14 16:36:08

Como puede observar, hay dos eventos que considerar,  onmouseenter onmouseleave.  El evento  onmouseenter detecta cuando el mouse ingresa al elemento donde se ha declarado el evento. Una vez que se produce el evento, se ejecutará la función inover (explicada a continuación). De manera similar, el evento  onmouseleave detecta cuando el mouse sale del elemento. Nuevamente, una vez que ocurre el evento, se ejecutará una función; En este caso, la función outover.
Las funciones inover y outover se definen de la siguiente manera:

Screenshot from 2016-07-14 16:31:51

La función  inover  recibe el ítem 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.

El objetivo de la función de frame es sumar 2px a la posición que tiene actualmente title-project start. 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 llama al método clearTimeout para detener la ejecución de la función de frame 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. Más tarde, llama al método clearTimeout para evitar llamar a la función frame y devuelve la posición del elemento a 0px; devolviéndolo a su estado original y ocultando el mensaje.

Finalmente, el  CSS  es usado para crear los estilos iniciales:

Screenshot from 2016-07-14 16:37:40

En este caso, CSS se utiliza para definir tamaños de fuente, color de fondo y la altura del contenedor. Las siguientes propiedades se aplican al contenedor con col-sm-4, CSS se definiría de la siguiente manera:

Screenshot from 2016-07-14 16:39:48

Esto es para evitar que el contenedor no se muestre con su información cuando la animación no se ha realizado.

LEER
NO COBRAMOS IVA POR SU SITIO WEB

Como se muestra en el ejemplo anterior, implementar una animación con JavaScript es bastante fácil; solo necesita saber sobre los eventos de JS. Aunque este blog post solo discutió dos tipos de eventos (onmouseenter y  onmouseleave) y una animación básica, JavaScript tiene una larga lista de eventos definidos que lo ayudarán a crear animaciones según sus necesidades.

En el próximo blog post, explicaré la misma animación, pero esta vez confiaremos en CSS3.

Para ver el resultado de esta animación, puedes ir aquí.


Comentarios