Tutorial: Flip en jQuery

Buceando por internet, he encontrado un interesante plugin jQuery. Este plugin nos puede servir para diseñar una web totalmente diferente, con unos efectos visuales muy llamativos. Obviamente, según las capacidades de cada uno, desarrollaremos junto con este plugin una web más o menos llamativa.

Pero… os doy una pista: junto con el plugin menú responsivo, podremos convertirla además en una web totalmente responsiva.

DEMO

Lo primero que tenemos que hacer, como siempre, es linkar el plugin y la librería jQuery:

Lo siguiente sería, añadir el código HTML:

<div id="contenedor">
<div id="menu">
<div class="home">HOME</div>
<div class="productos">PRODUCTOS</div>
<div class="servicios">SERVICIOS</div>
<div class="localizacion">LOCALIZACIÓN</div>
</div>
<div id="myFlippyBox">
<div class="homebox">HOME</div>
</div>
</div>

Lo que hemos hecho aquí, sería crear cada elemento del menú en un «div» diferente, pero se puede hacer de otras formas.
A cada link le hemos puesto una clase diferente, para luego en el código jQuery, al hacer clic en el elemento, nos haga el efecto deseado.

El siguiente paso es añadir el código jQuery en elde la web:

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){

 $(".home").click(function(){

	$("#myFlippyBox").flippy({
	content:"
<div class='servciosbox'>HOME</div>
",
	direction:"RIGHT",
	duration:"500",
	color_target:"grey"
});

 });

 $(".productos").click(function(){

	$("#myFlippyBox").flippy({
	content:"
<div class='homebox'>PRODUCTOS</div>
",
	direction:"TOP",
	duration:"500",
	color_target:"blue"
});

 });

  $(".servicios").click(function(){

	$("#myFlippyBox").flippy({
	content:"
<div class='serviciosbox'>Servicios</div>
",
	direction:"BOTTOM",
	duration:"500",
	color_target:"green"
});

 });

  $(".localizacion").click(function(){

	$("#myFlippyBox").flippy({
	content:"
<div class='localizacionbox'>Localizacion</div>
",
	direction:"LEFT",
	duration:"500",
	color_target:"red"
});

 });

});
// ]]></script>

En este código decimos que al hacer clic en el elemento del menú, haga al div con id «myFlippyBox» el efecto.

En «content» ponemos el contenido que queremos que muestre; en «direction», hacia dónde queremos que haga el movimiento; en «duration», la duración del efecto, y por último, con «color_target»: le decimos el color de fondo que queremos que tenga el elemento.

Como os comento, simplemente os explico el funcionamiento básico. Las posibilidades son infinitas, tendreis que echarle imaginación.

Página del plugin