Bonjour à tous,

Je suis en train d'essayer d'adapter un tuto sur un effet de parallax en jQuery mais il persiste un petit soucis sur le premier mouvement.

Voici le tuto que j'ai suivi : Le tuto

Par contre, sur mon projet, il y a 3 tableaux (#box1, #box2 et #box3) et le point de départ du site est le panneau central (#box2)

Mon problème est que lors du premier clic pour aller vers #box1, l'effet de parallax ne fonctionne pas, tout reste fixe... Par contre à partir de là, tout se met à fonctionner correctement...
Ça fait des semaines que je suis dessus et que je ne comprends absolument rien! :'(

Merci de vos conseils éclairés! Smiley cligne

Le jQuery :

[b]
function setPosition(check, div, p1, p2, p3) {
	if(check==='#box1')
		{
			$(div).scrollTo(p1, 800);
		}
	else if(check==='#box2')
		{
			$(div).scrollTo(p2, 800);
		}
	else
		{
			$(div).scrollTo(p3, 800);
		}
	};[/b]
	
	$(document).ready(function(){
	
	/*--- Hover sur retours home ---*/
	
		$('.img-accueil-up').css({
			'top' : '101px',
			'position' : 'absolute'
		});
		
		$(".bla-pres").mCustomScrollbar();
		
		$('#presentation-home').click(function(){
			$('#home-pres > div > .img-accueil-up').delay(800).animate({top : '0'}, 400);
		});
		
		$('#contact-home').click(function(){
			$('#home-contact > div > .img-accueil-up').delay(800).animate({top : '0'}, 400);
		});
		
		$('#home-pres, #home-contact').click(function(){
			$(this).find('.img-accueil-up').delay(100).animate({top : '101px'}, 400);
		});
[b]
		$('#wrapper').scrollTo($('#link2').attr('href'), 0);
		
		$('a.link, a.contenant-cache').click(function() {
			$('#wrapper').scrollTo($(this).attr('href'), 800);
			setPosition($(this).attr('href'), '#papier-content', '0px', '100px', '200px')
			setPosition($(this).attr('href'), '#logo-crayonne-content', '0px', '200px', '400px')
			$('a.link').removeClass('selected');  
			$(this).addClass('selected');
			return false;  
		});[/b]
		
		$('#nav-intro-pres').click(function(){
			if(!$(this).hasClass('on')){
				$('.navigation-pres').removeClass('on');
				$(this).addClass('on');
				$('.bla-pres').animate({top: '100%'}, 400);
				$('#intro-pres').animate({top: '0'}, 400);
			}
		});
		$('#nav-concep-pres').click(function(){
			if(!$(this).hasClass('on')){
				$('.navigation-pres').removeClass('on');
				$(this).addClass('on');
				$('.bla-pres').animate({top: '100%'}, 400);
				$('#concep-pres').animate({top: '0'}, 400);
			}
		});
		$('#nav-rea-pres').click(function(){
			if(!$(this).hasClass('on')){
				$('.navigation-pres').removeClass('on');
				$(this).addClass('on');
				$('.bla-pres').animate({top: '100%'}, 400);
				$('#rea-pres').animate({top: '0'}, 400);
			}
		});
		$('#nav-post-pres').click(function(){
			if(!$(this).hasClass('on')){
				$('.navigation-pres').removeClass('on');
				$(this).addClass('on');
				$('.bla-pres').animate({top: '100%'}, 400);
				$('#post-pres').animate({top: '0'}, 400);
			}
		});
		$('#nav-diff-pres').click(function(){
			if(!$(this).hasClass('on')){
				$('.navigation-pres').removeClass('on');
				$(this).addClass('on');
				$('.bla-pres').animate({top: '100%'}, 400);
				$('#diff-pres').animate({top: '0'}, 400);
			}
		});
		
	});


Mon code HTML :

<body>

<!-- GESTION PARALLAX -->
	<div id="papier-content" class="bg-parallax">
    	<div id="papier"></div>
    </div>
    <div id="logo-crayonne-content" class="bg-parallax">
        <div id="logo-crayonne"></div>
    </div>
<!-- FIN GESTION PARALLAX -->

<!-- MENU EN PLUS -->
	<div id="header">
    	<ul id="menu">
			<li><a id="link1" href="#box1" class="link">Présentation</a></li>
            <li><a id="link2" href="#box2" class="link">Home</a></li>
            <li><a id="link3" href="#box3" class="link">Contact</a></li>
		</ul>
	</div>
<!-- FIN MENU EN PLUS -->

<!-- CORPS DU SITE -->
	<div id="wrapper">
    	<ul id="mask">
		<!-- ZONE PRESENTATION -->
        	<li id="box1" class="box">
                <div class="content">
					<a href="#box2" class="contenant-cache" id="home-pres">
						<div class="masque-hover">
							<img src="images/retour-accueil.png" alt="Accueil" class="img-accueil-up"/>
						</div>
						<img src="images/lien-home-pres.png" alt="Accueil" />
						<span class="cache">
							Accueil
						</span>
					</a>
					
					<!-- CONTENU PRESENTATION -->
					<div id="zone-presentation">
						<div id="content-pres">
							<div id="intro-pres" class="bla-pres"></div>
							<div id="concep-pres" class="bla-pres"></div>
							<div id="rea-pres" class="bla-pres"></div>
							<div id="post-pres" class="bla-pres"></div>
							<div id="diff-pres" class="bla-pres"></div>
						</div>
					</div>
				</div>
            </li>
		<!-- FIN ZONE PRESENTATION -->
		
		<!-- ZONE ACCUEIL -->
            <li id="box2" class="box">
            	<div class="content">
					
					<!-- LE LOGO - TITRE H1 DU SITE -->
					<h1 id="logo">
						<img src="images/logo_mini.png" alt="INSIEME - Production audiovisuelle numérique" />
					</h1>
					
					<!-- NAVIGATION ACCUEIL -->
					<a href="#box3" class="contenant-cache" id="contact-home">
						<img src="images/lien-contact.png" alt="Contact" />
						<span class="cache">
							Contact
						</span>
					</a>
					<a href="#box1" class="contenant-cache" id="presentation-home">
						<img src="images/lien-presentation.png" alt="Présentation" />
						<span class="cache">
							Présentation
						</span>
					</a>
				</div>
            </li>
		<!-- FIN ZONE ACCUEIL -->
		
		<!-- ZONE CONTACT -->
            <li id="box3" class="box">
                <div class="content">
					<a href="#box2" class="contenant-cache" id="home-contact">
						<div class="masque-hover">
							<img src="images/retour-accueil.png" alt="Accueil" id="home-contact-logo" class="img-accueil-up" />
						</div>
						<img src="images/lien-home-contact.png" alt="Accueil" />
						<span class="cache">
							Accueil
						</span>
					</a>
					<div id="bande-droite"></div>
				</div>
            </li>
		<!-- FIN ZONE CONTACT -->
		
        </ul>
    </div>
</body>

Modifié par LeHudiaa (09 Mar 2014 - 13:09)