Elementi a comparsa disortinata con effetto bounce in jQuery

Oggi vi presento un simpatico script in jQuery molto semplice da realizzare. Si tratta di un animazione che permette la comparsa di blocchi alternati con effetto bounce su ogni oggetto contenuto nel blocco.

RISULTATO FINALE

Ketek - Elementi a comparsa disortinata con effetto bounce

HTML

 
<body>
<div id="block1" class="block">
<div class="cont">
<div class="titolo"><h1>Jimi Hendrix</h1></div>
<div class="testo"><hr />
James Marshall "Jimi" Hendrix (Seattle, 27 novembre 1942 &ndash; Londra, 18 settembre 1970) &egrave; stato un chitarrista e cantautore statunitense. &Egrave; stato uno dei maggiori innovatori nell´ambito della chitarra elettrica: durante la sua parabola artistica, tanto breve quanto intensa, si &egrave; reso precursore di molte strutture e del...</div>
<div class="immagine"><img src="Jimi Hendrix.png" /></div>
</div>
</div>
<div id="block2" class="block">
<div class="cont">
<div class="titolo"><h1>Jimmy Page</h1></div>
<div class="testo"><hr />
  Jimmy Page, nome completo James Patrick Page OBE (Londra, 9 gennaio 1944[1]), &egrave; un chitarrista e compositore britannico. Definito "indiscutibilmente uno dei pi&ugrave; influenti, importanti e versatili chitarristi e compositori della storia del rock"[6], nel 2010 &egrave; stato inserito come il secondo miglior chitarrista di tutti i tempi</div>
<div class="immagine"><img src="jimmy_page.png" /></div>
</div>
</div>
<div id="show_content"><a href="#">SHOW CONTENT</a></div>

CSS

 
body
{
                background-image:url(texture.png);
                font-family: Georgia;
                font-weight:bold;
                text-align:center;
}
h1
{
                font-size:48px;
                margin-bottom:20px;
}
h1:hover
{
                color:#e67373;
                cursor:pointer;
}
.block
{
                width:800px;
                height:400px;
                margin-top:60px;
                color:#e33737;
                margin-left:auto;
                margin-right:auto;
                opacity:0;
                z-index:1;
}
hr
{
                height:5px;
                background-color:#e33737;
                border:none;
                margin-bottom:30px;
                margin-top:-25px;
}
.testo
{
                font-size:18px;
                margin:20px;
                width:400px;
                height:230px;
}
.titolo
{
                width:400px;
                margin:10px;
                margin-top:0px;
}
 
#block1 .titolo,#block1 .testo,#block1 .immagine
{
                text-align:left;
                float:left;
}
#block2 .titolo,#block2 .testo,#block2 .immagine
{
                text-align:right;
                float:right;
}
.immagine
{
                width:320px;
                margin:20px;
                margin-top:-60px;
}
.cont
{
                width:inherit;
                height:inherit;
}
.titolo,.testo,.immagine
{
                position:relative;
                display:block;
}
.left
{
                float:left;
                width:400px;
                height:100%;
 
}
.right
{
                float:right;
                width:400px;
                height:100%;
}
#show_content
{
                position:absolute;
                width:400px;
                height:100px;
                background-color:#e33737;
                padding-top:50px;
                top:50%;
                left:50%;
                margin-left:-200px;
                margin-top:-50px;
}
#show_content:hover
{
                background-color:#d62c2c;
}
#show_content a
{
                cursor:default;
                text-decoration:none;
                font-size:36px;
                color:#051532;
}

jQUERY

Il codice è molto semplice: posiziono i blocchi oltre la pagina alternandoli (il primo a destra e il secondo a sinistra). A questo punto attraverso il ciclo each sposto ogni oggetto contenuto in ogni blocco nella direzione calcolata. Lo spostamento avviene con l´effetto bounce dunque è necessario includere nella pagina il plugin. Inoltre ho aggiunto all´animazione dei singoli oggetti la funzione delay() in modo da rendere la comparsa più movimentata.

 
window.onload = function (){
                $(´#show_content´).click(function()
                {
                if ($(this).css(´opacity´) == 0)
                {
                               return false;
                }
                // nascondo il bottone
                $(this).stop().animate({´opacity´:´0´},1000);
                // POSIZIONO I BLOCCHI ALTERNANDOLI
                var nome;
                var alternato = ´-´;
                var spost = ($(window).width()-800)/2;
                $(´.block´).each(function()
                {
                               value = alternato+´=´+(801+spost)+´px´;
                               nome = $(this).attr(´id´);
                               $(this).children(´.cont´).css(´marginLeft´,value);
                               if (alternato == ´+´)
                               {
                                               alternato = ´-´;
                               }
                               else
                               {
                                               alternato = ´+´;
                               }
                });
                // GESTISCO LE ANIMAZIONI
                alternato = ´+´;
                $(´.block´).each(function()
                {
                value = alternato+´=´+(801+spost)+´px´;
                $(this).stop().animate({´opacity´:´1´},3000);
                $(this).children(´.cont´).children(´.titolo´).stop().delay(80).animate({´left´:value},2000,´easeOutBounce´);
                $(this).children(´.cont´).children(´.testo´).stop().delay(201).animate({´left´:value},2000,´easeOutBounce´);
                $(this).children(´.cont´).children(´.immagine´).stop().delay(154).animate({´left´:value},2000,´easeOutBounce´);
                               if (alternato == ´+´)
                               {
                                               alternato = ´-´;
                               }
                               else
                               {
                                               alternato = ´+´;
                               }
                });
                });
};

Volendo potremmo utilizzare le funzioni viste in gallery per ottenere numeri casuali da inserire nella funzione delay() per rendere l´animazione ancor più dinamica.