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 y  jQuery 2D Transform Plugin para crear esta ingeniosa animación, muy similar a otras realizadas en flash.
Resultado: Demo - Descarga Ficheros Animation Banner

 

PLAIN TEXT

HTML:

 

<div id="ca_banner1" class="ca_banner ca_banner1">
    <div class="ca_slide ca_bg1">
        <div class="ca_zone ca_zone1"><!--Product-->
            <div class="ca_wrap ca_wrap1">
                <img src="images/product1.png" class="ca_shown" 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 class="ca_zone ca_zone2"><!--Line-->
            <div class="ca_wrap ca_wrap2">
                <img src="images/line1.png" class="ca_shown" alt=""/>
                <img src="images/line2.png" alt="" style="display:none;"/>
            </div>
        </div>
        <div class="ca_zone ca_zone3"><!--Title-->
            <div class="ca_wrap ca_wrap3">
                <img src="images/title1.png" class="ca_shown" alt="" />
                <img src="images/title2.png" alt="" style="display:none;"/>
                <img src="images/title3.png" alt="" style="display:none;"/>
            </div>
        </div>
    </div>
</div>

 

PLAIN TEXT

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;
}

 

PLAIN TEXT

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
});