Annonce ToutSurTout

Bienvenue sur toutsurtout.biz

Radio TST

Si vous souhaitez participer vous aussi aux discussions sur le forum, il faut vous inscrire ou vous identifier.

Le Thème TST Printemps est maintenant en place.

Les inscriptions sont actuellement OUVERTES.

Message 1 Discussion postée le 14-03-2013 à 10:59:30

Philippe
Avatar de Philippe


Titre: Banni
Avancement: Niveau 3
Date d'inscription: 26-09-2009
Messages: 3 665

[Réglé] Changement de background besoin d'aide

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 ok

démo ==> http://css-tricks.com/examples/StarryNightMoving/


https://www.world-lolo.com/images/uploads/image.num1445754529.of.world-lolo.com.jpg
Des stades aux entrées payantes sont pleins de gens qui pensent que ceux qu'ils applaudissent sont trop payés, et les bibliothèques à l'entrée gratuite sont vides des gens qui pensent que les livres sont trop chers ...
 

Message 2 Réponse postée le 14-03-2013 à 14:03:12

Loic
Avatar de Loic


Titre: Administrateur d'élite
Avancement: Niveau 5
Lieu: Avec Solenne
Date d'inscription: 26-09-2009
Messages: 104 620
Site web

Re: [Réglé] Changement de background besoin d'aide

Très joli cet effet !


http://www.toutsurtout.biz/img/UserBarTST.gif
http://www.toutsurtout.biz/img/Sign-Loic.gif
Loic DL un jour, Loic DL toujours ...
 

Message 3 Réponse postée le 05-09-2013 à 02:41:02

Loic
Avatar de Loic


Titre: Administrateur d'élite
Avancement: Niveau 5
Lieu: Avec Solenne
Date d'inscription: 26-09-2009
Messages: 104 620
Site web

Re: [Réglé] Changement de background besoin d'aide

Réglé.


http://www.toutsurtout.biz/img/UserBarTST.gif
http://www.toutsurtout.biz/img/Sign-Loic.gif
Loic DL un jour, Loic DL toujours ...