miércoles, 19 de octubre de 2016

MANUAL DE ANIMACIÓN DE IMÁGENES CON GSAP

Greensock es una página  que nos permite descargar la librería con la  cual podemos realizar animaciones sencillas  con pocas líneas de código y quedan muy elegantes.


Como descargar greensock.
Abrimos la página www.greensock, damos clic en productos, luego en Gsap y por ultimo descargar.




Luego de esto vamos a la ubicación donde lo descargamos y se descomprime el archivo, el cual es la librería.


Continuando con lo anterior creamos una carpeta la cual nombra como “practica_gsap”, la cual contendrá tres carpetas las cuales son “img, css y js”, un archivo “index.html” y un css “style.css”.



Luego vamos a la ubicación donde tenemos la carpeta greensock, dentro de ella buscamos la carpeta minified, la copiamos y la pegamos en la carpeta “js” que está dentro de  “practica_gsap” la cual contiene los archivos para la página.


En lo que sigue abrimos el archivo “index.html” y digitamos la estructura básica de HTML y el linqueo  para el css y minified.



Luego digitamos las líneas de código para  insertar dos imágenes, las cuales se incluyen en la carpeta “img”.


Así mismo abrimos el style.css para acomodar bien la imagen las cuales las llamaremos con el id en el css.

                                Es muy importante que colocar el position: absolute; esto                                                                           permite que la   imagen tome   cualquier estilo.


Lo  siguiente que se digita es para que las imágenes se muevan de un lugar a otro.


Se visualiza de la siguiente manera en el navegador.



Espero que les haya sido de gran utilidad y muchas gracias por su visita, hasta otro pronto manual.
si requieren descargar el archivo "index.php" y el css  dar clic a este linck:https://github.com/j-m-c-p/animacion-de-imagenes/tree/master/practica_gsap

No hay comentarios:

Publicar un comentario