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!
Le jQuery :
Mon code HTML :
Modifié par LeHudiaa (09 Mar 2014 - 13:09)
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!
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)