18008 sujets

Questions générales et questions de débutants

Problème pluging parallax

Bonjour,

Voici le problème actuelle que nous avons :

Sur la page d'accueil de notre site http://www.geniuxgame.com/
Nous avons 4 images (Arrière plan de la page) effectuant l'effet parallax, de ce coté pas de problème
Le site est réalisé avec WebAcappella 4

Description de notre problème :
Nous souhaitons avoir les éléments qui sont apparent, qui fassent le scrolling parallax comme les 4 arrières plan
Il nous semble qu'il manque une chose pour que le tout fassent l'effet voulu
Si vous avez une solution, a nous proposer

Voici les codes :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">


<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#nav').localScroll(800);
   
   //.parallax(xPosition, speedFactor, outerHeight) options:
   //xPosition - Horizontal position of the element
   //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
   //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
   $('#first').parallax("50%", 0.1);
   $('#second').parallax("50%", 0.1);
   $('#third').parallax("50%", 0.4);
   $('#fourth').parallax("50%", 0.3);
                          

})
</script>
<div id="first">
</div> 
   
<div id="second">
</div>

<div id="third">
</div>

<div id="fourth">
</div>


et 

*/

@charset "utf-8";
/* CSS Document */


#header, #first, #second, #third, #fourth{
   width: 100%;
}

#first{
   background:url(images/bg1.png) 50% 0 no-repeat fixed;
   width: 100%;   
   height: 1170px;
   margin: 0 auto;
   padding: 0;
   position:absolute;
   top:0px;
}

#second{
   background:url(images/bg2.png) 50% 0 no-repeat fixed;
   width: 100%;   
   height: 1331px;
   margin: 0 auto;
   padding: 0;
   position:absolute;
   top:1030px;
}

#third{
   background:url(images/bg3.png) 50% 0 no-repeat fixed;
   width: 100%;   
   height: 780px;
   margin: 0 auto;
   padding: 0;
   position:absolute;
   top:2270px;
}

#fourth{
   background:url(images/bg4.png) 50% 0 no-repeat fixed;
   width: 100%;   
   height: 1012px;
   margin: 0 auto;
   padding: 0;
   position:absolute;
   top:3015px;
}


Nous espérons avoir une réponse a notre problème

d'avance Merci

Bien cordialement
Modifié par olivier-f (25 May 2015 - 00:58)
Sujet clos
Aller à