Parallax avec multi-images superposées

Bonjour,

J’essaie de faire un effet parallax avec 3 images (superposés), comme par exemple le site suivant, avec la superposition de chaussures.

http://www.noleath.com/noleath/

Mais j'ai un problème de superposition, c'est à dire que j'aimerai :
- une image au fond
- une image (transparente .png) au milieu
- une image (transparente .png) devant

mais je n'arrive pas à avoir le bon ordre en visuel. L'image du fond est bien au fond mais j'ai l'image du milieu qui se place devant..... j'ai essayé plein de manipulation et je n'ai pas trouvé.

En gros, mon code est le suivant:
HTML :

          <div id="parallax-back">  
          	<div id="parallax-mittel">
                	<div id="parallax-front"></div> 
                </div>
          </div> 

CSS :

#parallax-back, #parallax-mittel, #parallax-front {
	margin:0px 0px 0px 0px;
       display: block;
       float: left;
       width: 100%;
    height:600px;
}

#parallax-back {
	background:#d3db34 url(../images/parallax1-back.png) center 0 no-repeat fixed;
  	background-size:cover;
}

#parallax-mittel {
 	 background:url(../images/parallax1-mittel.png) center 0 no-repeat fixed;
	 z-index:20;
  	background-size:cover; 
}

#parallax-front {
 	background:url(../images/parallax1-front.png) center 0 no-repeat fixed;
	z-index:30;
  	background-size:cover; 
}  

si vous avez eu ce problème, ou si vous avez une idée, merci de votre aide !
Modifié par 6l20 (04 Jun 2014 - 13:18)

Bonjour Timama,

Penses à utiliser les balises de colorisation syntaxique pour faciliter la lecture de tes messages
Je te propose un peu de lecture avec le tutoriel dédié de l'ami Simon : Zoom sur l'effet parallaxe
Sinon, nous ne serions pas contre une page de test en ligne

Bon courage.

6l20 a écrit :
Bonjour Timama,

Penses à utiliser les balises de colorisation syntaxique pour faciliter la lecture de tes messages
Je te propose un peu de lecture avec le tutoriel dédié de l'ami Simon : Zoom sur l'effet parallaxe
Sinon, nous ne serions pas contre une page de test en ligne

Bon courage.

merci.
oups pardon pour les balises de colorisation ... j'ai pas fait attention.
Sinon, je connais ce tutoriel et j'ai étudié plusieurs des cas dans les exemples, mais je n'y ai pas trouvé la solution à mon problème.


Disons que pour le moment, vu l'état du site, j'ai pas envie de le mettre en ligne car j'ai honte ... et mon hébergement gratuit est déjà utilisé pour le moment en test pour un client....

Je suppose qu'il y a bien un ordre à suivre pour définir l'ordre de superposition.... ou alors une astuce que je ne connais pas ....

merci pour votre aide....

+1 pour 6l20 il faut suivre des tutos pas à pas pour bien comprendre les principes (pas évident à chopper). Celui de Simon est pas mal pour une première approche mais il n’intègre qu'un background par "slide". Creative Juiz a un peu étoffé ce même tuto : http://www.creativejuiz.fr/blog/tutoriels/css3-effet-parallaxe-sans-javascript.

Je suis passé par celui là utilisant Jquery (berk ) pour comprendre le concept : http://ianlunn.co.uk/plugins/jquery-parallax/

En gros tes images de devant ne devront pas être "emboitées" comme dans ton code mais les unes après les autres et positionnées de façon absolue (donc il faut jouer le flux et/ou les z-index)... fouille un peu le net il y a plein de super tuto et de script js tout prets.

Bon courage !

_laurent a écrit :
+1 pour 6l20 il faut suivre des tutos pas à pas pour bien comprendre les principes (pas évident à chopper). Celui de Simon est pas mal pour une première approche mais il n’intègre qu'un background par "slide". Creative Juiz a un peu étoffé ce même tuto : http://www.creativejuiz.fr/blog/tutoriels/css3-effet-parallaxe-sans-javascript.

Je suis passé par celui là utilisant Jquery (berk ) pour comprendre le concept : http://ianlunn.co.uk/plugins/jquery-parallax/

En gros tes images de devant ne devront pas être "emboitées" comme dans ton code mais les unes après les autres et positionnées de façon absolue (donc il faut jouer le flux et/ou les z-index)... fouille un peu le net il y a plein de super tuto et de script js tout prets.

Bon courage !

merci beaucoup _laurent

les 2 tutos que tu cites je les ai déjà étudiés. Et j'ai effectivement aussi testé le fait de mettre les images les unes après les autres, en position absolue et en jouant sur z-index... et plein d'autres trucs.
Mais je n'ai pas réglé mon problème avec ça.

Bon, merci de me souhaiter bon courage .... je vais refaire encore les tutos ....
Il n'y a pas un exemple tout simple de 3 background par "slide" .....
Mais bon, j'y arriverai bien un jour et je posterai la solution