Animaciones con JQuery

Por Julio Giampiere Grados Caballero
Animaciones con JQuery

​La animación web se hace sobre todo con Flash o JavaScript pero en la actualidad, las cosas han cambiado, y con la ayuda de jQuery, la animación de la Web a través de JavaScript es mucho más predominante.

Una de las partes más divertidas de trabajar con la web, es animarla. Por animación no sólo entendemos a elementos móviles, sino también elementos que cambian su visibilidad, alterando sus propiedades, ya sea en un tiempo determinado o en reacción a un evento, o incluso cambiar el tamaño de un elemento.

La animación web se hace sobre todo con Flash o JavaScript pero en la actualidad, las cosas han cambiado, y con la ayuda de jQuery, la animación de la Web a través de JavaScript es mucho más predominante.

En el artículo de hoy hablaremos sobre el método offset, y cómo animar elementos con dicho método. Bien para empezar a organizar nuestro ejemplo, tendremos que primero descargar la librería jquery, que la encontramos aquí. (http://jquery.com/download/). Una vez agregada está librería al proyecto, tendremos un pequeño diseño, de nuestra codigo, el cual será:

 

 

       Clase 2 Animate    

   

       

 

Método Offset.

El método $ .offset (), devuelve un objeto que contiene un valor numérico de la posición left y top que indican la posición actual de un elemento en relación al documento. El cual puede recibir las coordenadas actuales de un elemento o establecer las coordenadas del elemento, referente a top y left. Veamos entonces del ejemplo anterior:

 

Entonces de dar click, sobre la caja de color verde e inspeccionamos nuestra consola javascript, veremos que el objeto devuelto contiene dos propiedades, las cuales son:

Object {top: 10, left: 10}

Como habíamos hablado antes, a través del método offset, también podemos establecer dichas coordenadas obtenidas, entonces mediante ellas, haremos una animación básica.

 

Entonces de nuevamente dar click, sobre la caja verde, veremos un movimiento constante que se dará sobre la caja, animando está.

El ejemplo práctico lo encuentras en este repositorio github. (https://github.com/JulioGrados/offsetJquery).

 

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Julio Giampiere Grados Caballero

Julio Giampiere Grados Caballero

CTO y Cofundador de Devcode.la. Full stack JavaScript. React | jQuery | Vanilla | Backbone | Node | MongoDB.