jQuery plugin twentytwenty un antes y después con mucho diseño

DESCARGA : Twenty Twenty

jQuery plugin twentytwenty un antes y después con mucho diseño, sin duda el plugin http://develoteca.com/before-y-after-con-jquery/  tenia un uso muy interesante ya que nos mostraba imágenes con el efecto antes y después, el plugin no deja de ser de gran ayuda, pero entonces viene la pregunta ¿solo ese existe?, tal vez la respuesta sea pues solo ese conozco, pero en general no significa que sea el único, por lo que existen varias alternativas, una de ellas es twentytwenty que tiene el mismo efecto de antes y despues pero con mucho estilo, veamos el ejemplo y ustedes comenten con cual se quedarían.

Paso 1.- incluir las referencias  de los scripts

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="js/jquery.event.move.js"></script>
    <script src="js/jquery.twentytwenty.js"></script>

Paso 2.- incluir los estilos

  <link href="css/foundation.css" rel="stylesheet" type="text/css" />
  <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />

Paso 3 incluir el codigo que quieres mostrar como antes y después

<div class="twentytwenty-container">
          <img src="img/1_1.jpg" />
          <img src="img/1_2.jpg" />
        </div>

Paso 4.- incluir el código que transforma el html en componente

$(window).load(function() {
  $("#container1").twentytwenty();
});

Este plugin se diferencia por controlar el efecto antes y después de forma horizontal y de forma vertical.

Puedes ver el siguiente ejemplo y el uso: http://zurb.com/playground/twentytwenty

You may also like...