Página de inicio   Diseño y desarollo web

Mastercafe S.L.

Dirección: 
Pl. Puerta de Europa 2 - 1D 
Oviedo Asturias 
33011

Telefonos de contacto: 
Oficina:  +34 627 531 764
Tel:  985 11 3939
Fax:  985 11 5780 

Correo electronico:  

info@mastercafe.com

 

ver mapa....

qrcode

TopBox

jQuery tutoriales haz más escribiendo menos

jQuery tutoriales y ejemplos

separador
23
Jun

QuickFlip jQuery plugin

Relacionados: jQuery Plugins Flip animacion

QuickFlip es un plugin para jQuery que nos permite girar una parte del HTML que hemos puesto y mostrar un contenido alternativo. Dispone de parametros para realizar la animacion vertical y horizontalmente.

Desarrollado por Jon Raasch es una excelente herramienta para generar unas originales animaciones en la web y hacer más agradable la interacción con el usuario.

jQuery QuickFlip

QuickFlip toma una parte del HTML y lo gira como una tarjeta. Es simple de usar y realiza una animación original.

Click para hacer Flip

QuickFlip 2

Plugin para jQuery

By Jon Raasch

Acerca de QuickFlip

Click para verlo en acción

Front content here

Click to Flip

Nuestro texto adicional HTML para la caja

Mostramos la parte de atrás de la tarjeta.

Click para Flip

 

Para conseguir este efecto necesitamos realizar muy pocos pasos, el resto ya será un tema de personalización de aspecto para nuestra web.

El HTML

Necesitamos identificar el contenido que vamos a girar con QuickFlip y para ello vamos a crear una caja DIV con la clase que luego identificamos en el selector de jQuery

<div class="quickFlip">
<div class="blackPanel">
<h3 class="first quickFlipCta">jQuery QuickFlip</h3>
<p class="panel-content">QuickFlip toma una parte del HTML y lo gira como una tarjeta. Es simple de usar y realiza una animaci&oacute;n original.</p>
<p><a href="#" class="quickFlipCta">Click para hacer Flip</a></p>
</div>
<div class="redPanel">
<h3 class="first quickFlipCta">QuickFlip 2</h3>
<h4>Plugin para jQuery</h4>
<p><em>By Jon Raasch</em></p>
<p><a href="http://jonraasch.com/blog/quickflip-2-jquery-plugin">Acerca de QuickFlip</a></p>
<p><a href="#" class="quickFlipCta">Click para verlo en acci&oacute;n</a></p>
</div>
</div>

Como se ve en el HTML primero ponemos un DIV con la clase quickflip2 que luego llamamos en el script. Dentro de ella generamos dos DIV que contendran cada una de las caras del FLIP. El resto ya es una decisión nuestra para poner estilos y contenidos a nuestro gusto

El CSS

Basicamente se recomienda crear cajas flip con anchos fijos, por esta razón vamos a establecer lo primero los tamaños:

.quickFlip {
     height: 216px;
     width: 322px;
     }

El resto ya es una cuestión de estilizar nuestro contenido de caja, vamos a poner en este caso el ejemplo que se visualiza arriba con dos distintos contenidos

.redPanel, .blackPanel {text-align: center;}
.quickFlip .blackPanel {
    background: url('images/flip-panel-brown.png') no-repeat 0 0 #FFF;
    position: absolute;
padding:15px;}

.quickFlip .redPanel {
    background: url('images/flip-panel.png') no-repeat 0 0 #FFF;
    position: absolute;
padding:15px;}
.quickFlip, .quickFlip2 {
    font-family: "Trebuchet MS", Verdana, Sans-serif, sans;
    font-size: 13px;
    position: relative;
}
.quickFlip2 .blackPanel {
    background-color: #FFD993;
    color: darkbrown;
    border: 1px outset #A61C14;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
padding:15px;
}

.quickFlip2 .redPanel {
    background-color: #75941f;
    color: #FFF;
    border: 1px outset #4f6417;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
padding:15px;
}
.quickFlipCta {
    cursor: pointer;
}

Solo resaltar la última definición que nos va a ayudar a poner el cursor del ratón al estar sobre la caja en formato de click y así hacer más intuitivo el funcionamiento. El resto de elementos son los tradicionales de una hoja de estilos para personalizar el texto, colores, margenes, fondos, etc...

El Javascript

Desde luego pocas cosas son tan simples como QuickFlip, tan solo necesitamos indicar el selector y que actúe sobre el:

<script src="ruta/jquery.quickflip.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.quickFlip').quickFlip();
    $('.quickFlip2').quickFlip({vertical : true });
});
</script>

Recuerda la importancia del Document.Ready para asegurar que todo está cargado antes de lanzar el script, así evitarás posibles errores por descargas incompletas.
Espero que os guste y os invito a visitar la web de Jon Raasch para ver otras posibles opciones y parámetros que además dispone este plugin.

| Mas
Vota
Regístrate para acceder al blog

VOLVER
separador

Web creada con MBC Diseño y desarrollo web © Mastercafe SL - Alojamiento web trafico ilimitado hosting ISPActivo  |  Nota legal  |  Nota técnica

Valid XHTML 1.0 Transitional Valid XHTML 1.0 Transitional

 

blanco

blanco

Login/Conexion

No estas registrado? Registrate!