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 :)
youyouk
super ce billet, merci pour le tuto clair et précis! (via scoopéo)
frinux
On ne risque pas d’avoir de problème de mémoire avec des fonctions qui s’auto-appellent ?
zorrito
Non aucun problème, on peux aussi utiliser setInterval.
Jean Claude
Alors moi j’ai eu un gros problème sur FF et safari, tout marche bien et puis au bout de quelques minutes les navigateurs plantent complètement !
zorrito
Bizarre, tu remarques quelque chose d’anormal dans l’utilisation de mémoire de tes processus concernant FF et safari lorsque l’animation tourne?
jean Claude
Non j’ai été obligé de contourner le problème en limitant la boucle
comme ça
for(var i=0; i<5; i++)
animation(i);
Si tu veux jeter un oeil, clique sur mon site et sur la bulle bleue en bas à gauche
David
Très bon article encore, bien plus léger que du Flash, à voir après sur l’ensemble des navigateurs et sur les mobiles, sur l’iPhone par exemple mais excellent en tout cas.
zorrito
Merci.
f4lco
Très bonne article, et super code, personnellement je n’y connais rien en jquery.
Néanmoins je rebondit juste sur ta remarque David, tu dis « bien plus léger que Flash » Oo ?
Excuse moi mais rien que l’image du BG elle pèse 21 ko ! en flash c’est vectorisé et ça pèse 1ko max.
ensuite l’image des nuages vraiment super facile à faire en flash , en vecto aussi, cela pèserai allé… 3 ko, sachant que là en plus il y a 2 images de nuages identiques qui sont utilisés pour avoir de la transparence sur l’une … Pour moi complètement inutile, en flash tu utiliserai le même symbole graphique de nuage et tu y appliquerai une transparence, même par action script si tu sais le faire… la encore moins lourd.
allez deux choses que tu utilises identiquement seront le renard et le logo … Qui seront légèrement compressés avec flash.
Bref la même animation en flash faite avec de l’action script pour le mouvement des objets serais bien plus léger que tout c’est éléments en image séparé !
Mais après je n’utilise pas flash de la même manière que toi :x .
Mael
Les explications sont d’une clarté limpide, avec un code facile à lire. L’idéal pour apprendre.
C’est exemplaire, merci encore !
Jean Claude
Merci c’est extra avec l’iphone !
Par contre comme d’hab un problème avec internet explorer, j’ai un png avec des bords blancs et avec la fonction opacity cela me mets des vilains bords noirs partout à la place :-(
Une idée ?
zorrito
Tu dois utiliser une ancienne version d’IE qui ne sait pas gérer le png, il faut soit que tu créés des images en .gif ou alors tu pourras trouver des pngfix sous google comme http://www.twinhelix.com/css/iepngfix/ ou http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/ et bien d’autres.
jean Claude
Malheureusement je ne crois pas que le problème vienne des png mais plutôt de l’incapacité d’IE à gérer correctement ces CSS.
J’ai réglé le problème avec:
if(jQuery.support.opacity) {
$(« a#player img »).animate({opacity:0.1},2000).animate({opacity:1}, 2000);
}
else {
$(« a#player img »).show();
}
Ce qui fait que cela marche quasiment partout, sauf sur IE !! :-)
zorrito
Tu testes sous quel IE?
Sur le 7 et 8 ca semble être bon.
abdallah
merci pour l’animation, je trouve cela super.