Bonjour à tous je viens faire une demande bien spécifique en effet j'aimerai pouvoir modifier mon backround sur mon site et le rendre plus comment dire joyeux et original pour cela
Vous n'avez jamais entendu parlé de l'effet Parallax ?
Cela consiste à animer plusieurs couches d'images (transparentes) superposées à différentes vitesses créant ainsi un effet animé très réussi.
Le rendu est vraiment sympa, si vous combinez les bonnes images, vous arriverez facilement à faire quelque chose de très réussi.
Mise en place
Créez vos divs HTML:
Code :
<div id="background"></div>
<div id="midground"></div>
<div id="foreground"></div>
Ajouter une couche CSS pour appliquer vos images aux divs:
Code :
#background {
background: url(../images/background.png) repeat 5% 5%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100;
}
#midground {
background: url(../images/midground.png) repeat 20% 20%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 200;
}
#foreground {
background: url(../images/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 300;
}Et enfin la couche Javascript:
Code :
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#midground').css({backgroundPosition: '0px 0px'});
$('#foreground').css({backgroundPosition: '0px 0px'});
$('#background').css({backgroundPosition: '0px 0px'});
$('#midground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 240000, 'linear');
$('#foreground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 120000, 'linear');
$('#background').animate({
backgroundPosition:"(-10000px -2000px)"
}, 480000, 'linear');
});
</script>je vous ai mis le code pour m'aider dans ma démarche et la démo ci-dessous pour vous montrer l'effet désiré.
J'aimerai un peu près cet effet sur mon site également si vous voyez ce que je veux dire 
démo ==> http://css-tricks.com/examples/StarryNightMoving/