Bonjour à tous,

Voila je rencontre un petit problème avec mon code.
Je recherche a mettre en place un effet de parallax sur une page de mon site en développement. Je voudrais supperposer 2 backgrounds et en faire bouger uniquement 1 lorsque ma souris bouge.
J'ai alors recherché des exemples/tutoriels et je suis tombé sur celui-ci : https://codepen.io/chrisboon27/pen/rEDIC
Je l'ai donc adapté, et l'effet fonctionne, or je ne peux plus scroller sur ma page.... Je cherche depuis un bon moment mais je ne trouve pas la solution....

Voici mon code actuel :

$(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#parallax").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
          $('#parallax').css("background-position", newvalueX+"px     "+newvalueY+"px");
});
});

.tournees
{
    width: 100%;
    height: 100%;
    background-image: url("../img/fondtournee.jpg");
    background-size: 100% auto; 
    background-repeat: no-repeat;
    position: fixed;
}

#parallax
{
  background-image: url("../img/confettis.png");
  position:fixed ;
  top:0;
  width:100%;
  z-index:0;
  height:100%;
  background-size: calc(100% + 50px);
}

<?php include '../include/header.php'; ?>
<section class="tournees">
    <div id="parallax">
    .
    . <!-- CODE DE MA PAGE -->
    .
    </div>
</section>

Je précise que si je ne mets pas position:fixed; sur ma section, le background ne s'affiche pas. Uniquement les confettis s'affichent.

Si vous avez des idées, je suis vraiment preneur !!

Merci d'avance 

-
Edité par I--Zop--I 13 décembre 2018 à 9:08:19

Bonjour,
A vue de nez, sans test n'y rien, je dirais que le problème vient du fait que tu met le contenu de ta pages dans :

<section class="tournees"><div id="parallax"></div></section>

Essaye d'écrire ton code HTML en dehors et dit moi si oui ou non c'est ça

Bonjour Angelisium et merci pour ton retour !

Alors en effet j'ai sorti le contenu de ma page,voici le code : 

<?php include '../include/header.php'; ?>
<section class="tournees">
    <div id="parallax"></div>
    .
    . <!-- CODE DE MA PAGE -->
    .
</section>

Avec un position:relative; aux différents éléments de ma page, tout fonctionne ! Merci

-
Edité par I--Zop--I 14 décembre 2018 à 11:22:37