Efecto antes y después en jQuery

antes-despues Hoy les traigo un tutorial más sobre jQuery y todas sus posibilidades, que cada día son más grandes, y en esta ocasión es particularmente recomendable para aquellos que les gusta hacer tutoriales en texto e imagen.

Vamos a ver un efecto llamado “antes y después” en donde a través del efecto de una cortina podemos ver dos imágenes, una en un estado anterior, y la otra en el estado actual, muy bueno para retoques o demostraciones de por ejemplo los daños antes y después del terremoto de Japón

Descargar plugin Ejemplos del pugin

HTML

Lo primero que hacemos siempre es definir la estructura de nuestro ejercicio para usar adecuadamente el plugin, y empezamos con HTML y lo ponemos dentro de la etiqueta <body>:

En el código podemos ver que hay una capa llamada “container”, la cual tiene dentro dos capas más, cada una con una imagen, y lo curioso aquí es notar que la propiedad “alt” menciona “before” y “after”, indicando cual va a ser la que va a estar en el fondo y cual por encima. El tamaño de las imágenes debe ser el mismo.

jQuery

En este paso lo que hacemos en que dentro de la etiqueta <head> vamos a copiar y pegar el código. Ahora, lo primero que hacemos es vincular las librerías de jQuery, donde sólo tienen que copiar el código tal y como está, el problema será esta línea de código:

Esta línea de código obliga a que cuando descargues el plugin lo subas a internet y lo vincules reemplazando el texto de jquery.beforeafter.js por la dirección donde la alojaste, pero si lo subes a Google Sites no tendrás ningún problema.

Y bueno, si todo te sale bien ya podrás ver el plugin funcionando correctamente: