Tutorial: Como animar objetos con jQuery

January 28th, 2010
Tutorial: Como animar objetos con jQuery
2 Comments »
Tutoriales
  • Delicious

¿Que es jQuery?

jQuery es un framework que nos permite realizar animaciones complejas con muy poco código y gran facilidad para principiantes, efectos como fadeIn, fadeout, slideUp, slideDown que antes nos llevaba tanto tiempo en lograr (realizando cálculos) ahora es mucho mas sencillo gracias a una serie de funciones jQuery predefinidas. jQuery utiliza JavaScript pero se puede combinar con PHP y muchos otros lenguajes.

¿Que se puede lograr  con jQuery?

Básicamente todo, desde una animación de desvanecimiento hasta varias animaciones en cadena con la función callback(). Es ideal para galerías de imágenes, descargar datos con AJAX y mostrar u ocultar divs dinámicamente y de una manera muy elegante.

jQuery trabaja a manera de plugins los cuales son archivos mas pequeños que desempeñan una tarea especifica y le agregan a jQuery otras funcionalidades, por ejemplo, hay un plugin para realizar animaciones cíclicas, hay otros varios plugins para realizar animaciones como shuffle y hasta efectos de desenfoque y muchos otros.

¿Quienes pueden utilizar jQuery?

Cualquier persona con conocimientos básicos de JavaScrip u otro lenguaje (ActionScript, PHP) lo importante es tener la noción básica de que es una variable y que papel desempeña una función. Pero para alguien mas avanzado también se pueden aplicar ciclos, condicionales u otros.

Como utilizar jQuery:

A continuación te mostrare como realizar algunas animaciones simples, tales como desvanecimiento, movimiento de un div y veremos las propiedades básicas con las que podemos jugar usando jQuery.

Básicamente para utilizar jQuery en tu sitio Web solo necesitas  3 cosas:

  1. Los archivos javascript de jQuery que puedes descargar aquí, también debes descargar los plugins si los vas a utilizar
  2. Conocimientos básicos de programación
  3. Opcional: Algunos archivos como imágenes podrían servir

Empecemos:

  1. Crea un nuevo directorio llamado ‘practica_js’ dentro de esta carpeta deberas crear otras varias:
    1. Crea una carpeta llamada ‘js’ donde albergaremos los archivos JavaScript de jQuery
    2. Crea una carpeta llamada ‘imagenes’ en la cual colocaremos todas las imágenes que vayamos a utilizar
    3. Descarga el archivo desde jQuery aquí
    4. Coloca el archivo jQuery en la carpeta ‘js’ previamente creada y cambia el nombre del archivo por jquery.js
    5. Crea una archivo HTML dentro de la carpeta practica_js, a este archivo lo nombraras index.html.

El código JavaScript:

  1. Para empezar a utilizar jQuery es necesario que entiendas que es una función y una variable
  2. El código que llamara las funciones de jQuery siempre (aunque también lo puedes escribir en el body de la pagina) es recomendable colocarlo entre los etiquetas <head></head>, por muchas razones tales como el proceso de carga de la pagina, o por simple orden y claridad en el código.
  3. Primero: llamamos al archivo jQuery escribiendo el siguiente código entre los etiquetas <head></head>:
    1. <script src=”js/jquery.js”></script>
    2. Segundo: Agregamos otro script justo debajo del primero:
      1. <script language=”javascript”>
        $(document).ready(function (){
        $(“#ocultar”).click(function(event){
        event.preventDefault();
        $(“#capaefectos”).fadeTo(“slow”, 0);
        $(“#mostrar”).fadeTo(“slow”, 100);
        $(“#ocultar”).fadeTo(“slow”, 25);
        });

        $(“#mostrar”).click(function(event){
        event.preventDefault();
        $(“#capaefectos”).fadeTo(“slow”, 100);
        $(“#mostrar”).fadeTo(“slow”, 25);
        $(“#ocultar”).fadeTo(“slow”, 100);
        });
        });
        </script>

      2. Este ultimo script contiene las funciones y las variables necesarias para que nuestro código funcione.

El código HTML:

  1. Coloca y pega el siguiente codigo entre las etiquetas <body></body>:
    1. <div style=”background-color: #CCCCCC; color:fff; padding:10px; width:560px; padding-top:50px; padding-bottom:50px; font-size:24px; text-align:center;”>
      Esta es una capa que nos servirá para hacer efectos!
      </div><p>
      <a href=”#”>Ocultar la capa</a> |
      <a href=”#”>Mostrar la capa</a>
      </p>
    2. Una vez que hayas pegado este codigo puedes visualizar la pagina en tu navegador. Deberia ocurrir una animación de desvanecimiento cuando haces click en ‘Ocultar capa’ y un efecto de aparicion cuando haces click en ‘Mostrar capa’.

Ejemplo:

Esta es una capa que nos servirá para hacer efectos!

Ocultar la capa | Mostrar la capa

Explicación del código:

jQuery es una librería de JavaScript, en otras palabras es una conjunto de funciones, cálculos, variables y condicionales que fueron creados para proporcionar una mayor facilidad a la hora de crear una animación. Por así decirlo, jQuery es un paquete de paquetes mas pequeños y en cada paquete de jQuery contiene hay un bonito efecto.

Ahora bien, en el código JavaScript que utilizamos para el ejemplo nos estamos refiriendo a los objetos que vamos a animar en el HTML mediante su identificador correspondiente:

$(“#capaefectos”) es lo mismo que pero en el lenguaje JavaScript. Lo mismo sucede con los demás ID que hay en el script.

La el tipo de animación que queremos que suceda es seleccionada por su nombre, jQuery posee varias animaciones básicas (véase documentación de efectos de jQuery) tales como:

Efectos básicos: Show(), hide(), toggle().

Efectos de desplazamiento: slideDown(), slideUp(), slideToggle.

Efectos de opacidad:  fadeIn(), fadeOut(), fadeTo().

Efectos personalizados: animate(), stop().

Cada uno de estos efectos contiene parámetros, tales como la opacidad (para los efectos de opacidad), la posición, la velocidad de la animación, entre otros.

Así funciona el mundo jQuery. Es muy sencillo, pero si necesitas ayuda no dudes en contactarme dejando un mensaje al final de esta entrada.



Tags: , , ,

Entradas Relacionadas:

Tutorial: Efecto de scroll suavizado con jQuery
Cuando navegamos en paginas Web con mucho contenido y por ende muy ‘largas’ a veces debemos utilizar...
 Google Analitycs, un kit completo de prestaciones para campañas SEO
Si eres principiante en SEO quizá no sepas la existencia de este servicio, Google Analytics es un...
 Grabar video desde la pantalla de tu ordenador
Acabo de encontrar lo que buscaba. Jing, es una aplicación que te permite (sin muchas complicaciones)...
 Tutorial: Como Crear Un Sitemap Para Google
Okay, de vuelta a mi blog, hacia ya varios días no publicaba una entrada sin embargo ya estoy de vuelta...

Esta entrada ha sido guardada en Tutoriales. Puedes seguir cualquier respuesta o comentario en esta entrada susribiendote a nuestro RSS 2.0 feed. Puedes tambien Dejar una respuesta, o darle seguimiento desde tu propio sitio Web.