SummArg | Cursos y recursos para webmasters

12/07/2011

Esquinas que se despegan con el plugin para jQuery, Sexy Curls

Elliott Kember es el creador de Sexy Curls que nos permite añadir en pocos pasos un efecto de esquina que se despega (conocido también como page peel ) permitiendo mostrar debajo otro elemento. El script es un plugin para jQuery, por lo que deberemos descargar la última versión del framework como así también jQuery UI. Primero insertamos los scripts y el CSS prestando atención a las rutas:
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="turn/jqueryui.js"></script>
<script type="text/javascript" src="turn/turn.js"></script>
<link rel="stylesheet" type="text/css" href="turn/turn.css">

Inicializamos el script indicando el ID del div que se mostrará al “correr la pestaña” que se genera en la esquina. Además se setea la posición del efecto.
<script type="text/javascript">
$(document).ready(function(){
$( '#target' ).fold({side: 'right', directory: 'turn'});
});
</script>

Y finalmente colocamos dentro del div lo que queremos que se muestre:
<img id="target" src="turn/code.png">

El plugin dispone de varias opciones para ser personalizado.

Descarga en Github | Demo y documentación

Dejar un comentario