DemoTel

Dans un premier temps nous allons mettre en place la carte postale ainsi que les images qui vont la composer.

Nous avons donc un conteneur qui fera office de cadre pour la carte postale et 4 autres div qui contiendront des images.

<div id="content">
<div id="nuage1"><img src="images/nuage1.png"/></div>
<div id="nuage2"><img src="images/nuage2.png"></div>
<div id="zorritostudio"><img src="images/zs.png"></div>
<div id="zorrito"><img src="images/zorrito.png"></div>
</div>

Voici le code CSS qui permet de positionner les images.

#content{
position:relative;
width:629px;
height:400px;
top:30px;
/*overflow:hidden; */ on met cette propriété en commentaire pour voir ou sont positionnées nos images.
border:5px solid #C7C7C7;
background: url(images/bg.jpg);
} 

#nuage1{
position:absolute;
top:80px;
left:-140px; /*en dehors de l'image pour le faire apparaitre de gauche à droite*/
z-index:1;
}

#nuage2{
position:absolute;
top:10px;
left:-120px;
z-index:1;
} 

#zorrito{
position:absolute;
top:30px;
left:-240px;
z-index:2;
} 

#zorritostudio{
position:absolute;
top:-80px;
left:240px;
z-index:2;
}

A ce stade vous devriez avoir quelque chose qui ressemble à ceci.

Il ne reste plus qu’à animer tout ceci en utilisant jquery.

Dans un premier temps pensez à décommenter la propriété overflow pour #content.
Voici notre code javascript commenté.

<script type="text/javascript">
$(document).ready(function() {
animation();
});

function animation(){
nuage1();
zorrito();
zorritostudio();
nuage2();
}

function zorrito(){
//le petit renard va se déplacer de la position défini dans le css (hors du cadre) jusqu'à 20px de la gauche du cadre avec un effet de rebond.
$("#zorrito").animate({left: '20px' }, {queue:false, duration:1000, easing:'easeOutBounce'});
}

function zorritostudio(){
//le setTimeout nous permet de faire un effet infini (le 4000 vient du 2000 + 2000)
 $("#zorritostudio").animate({top: '180px' }, {queue:false, duration:1000, easing:'easeOutBounce'});
 $("#zorritostudio").animate({opacity:1},2000).animate({opacity:0.1}, 2000)
 setTimeout("zorritostudio()",4000);
}

function nuage1(){
 $("#nuage1").animate({left:"+=950px"},7000).animate({left:"-140px"}, 0)
 setTimeout("nuage1()",7000);
}

function nuage2(){
 $("#nuage2").animate({left:"+=950px"},5000).animate({left:"-120px"}, 0)
 setTimeout("nuage2()",5000);
}
</script>

On obtient une belle petite animation qui nous fait penser à un flash mais très simple :)