Posteado por: djdonovans | enero 23, 2011

Banner animado personalizado con jQuery

Custom Animation Banner with jQuery, es una maravillosa idea para crear banner animados, personalizados con jQuery. La idea es contar con elementos diferentes, que irán apareciendo paso a paso o en una secuencia determinada, dependiendo de nuestra personalización. Se ha utilizado jQuery Easing Plugin jQuery 2D Transform Plugin para crear esta ingeniosa animación, muy similar a otras realizadas en flash.

Resultado: Demo – Descarga Ficheros Animation Banner

HTML:

<div id=”ca_banner1″>
<div>
<div><!–Product–>
<div>
<img src=”images/product1.png” alt=””/>
<img src=”images/product2.png” alt=”” style=”display:none;”/>
<img src=”images/product3.png” alt=”” style=”display:none;”/>
<img src=”images/product4.png” alt=”” style=”display:none;”/>
<img src=”images/product5.png” alt=”” style=”display:none;”/>
</div>
</div>
<div><!–Line–>
<div>
<img src=”images/line1.png” alt=””/>
<img src=”images/line2.png” alt=”” style=”display:none;”/>
</div>
</div>
<div><!–Title–>
<div>
<img src=”images/title1.png” alt=”” />
<img src=”images/title2.png” alt=”” style=”display:none;”/>
<img src=”images/title3.png” alt=”” style=”display:none;”/>
</div>
</div>
</div>
</div>
************************************************************************
CSS:

.ca_banner{
position:relative;
overflow:hidden;
background:#f0f0f0;
padding:10px;
border:1px solid #fff;
-moz-box-shadow:0px 0px 2px #aaa inset;
}
.ca_slide{
width:100%;
height:100%;
position:relative;
overflow:hidden;
}
.ca_zone{
position:absolute;
width:100%;
}
.ca_wrap{
position:relative;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.ca_wrap img.ca_shown{
display:inline !important;
}
/* Custom styles of banner1 */
.ca_banner1{
width:650px;
height:300px;
}
.ca_bg1{
background:#fff url(../images/bg.jpg) no-repeat top left;
}
.ca_banner1 .ca_zone1{
top:0px;
left:0px;
}
.ca_banner1 .ca_wrap1{
width:320px;
height:300px;
}
.ca_banner1 .ca_zone2{
top:100px;
left:240px;
}
.ca_banner1 .ca_wrap2{
width:387px;
height:203px;
}
.ca_banner1 .ca_zone3{
top:32px;
left:250px;
}
.ca_banner1 .ca_wrap3{
width:378px;
height:31px;
}/*Custom Style for Second Banner*/
.ca_banner2{
width:120px;
height:600px;
}
.ca_bg2{
background:#fff url(../images/bgSmall.jpg) no-repeat top left;
}
.ca_banner2 .ca_zone1{
top:10px;
left:0px;
}
.ca_banner2 .ca_wrap1, /*They are the same size*/
.ca_banner2 .ca_wrap2{
width:120px;
height:220px;
}
.ca_banner2 .ca_zone2{
top:250px;
left:0px;
}

************************************************************************

JavaScript:

$(‘#ca_banner1’).banner({
steps : [
[
//1 step:
[{“to” : “2”}, {“effect”: “zoomOutRotated-zoomInRotated”}],
[{“to” : “1”}, {}],
[{“to” : “2”}, {“effect”: “slideOutRight-slideInRight”}]
],
[
//2 step:
[{“to” : “3”}, {“effect”:”slideOutTop-slideInTop”}],
[{“to” : “1”}, {}],
[{“to” : “2”}, {}]
],
[
//3 step:
[{“to” : “4”}, {“effect”: “zoomOut-zoomIn”}],
[{“to” : “2”}, {“effect”: “slideOutRight-slideInRight”}],
[{“to” : “2”}, {}]
],
[
//4 step
[{“to” : “5”}, {“effect”: “slideOutBottom-slideInTop”}],
[{“to” : “2”}, {}],
[{“to” : “3”}, {“effect”: “zoomOut-zoomIn”}]
],
[
//5 step
[{“to” : “1”}, {“effect”: “slideOutLeft-slideInLeft”}],
[{“to” : “1”}, {“effect”: “zoomOut-zoomIn”}],
[{“to” : “1”}, {“effect”: “slideOutRight-slideInRight”}]
]
],
total_steps : 5,
speed : 3000
});

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Categorías

A %d blogueros les gusta esto: