Q:

mousemove on multiple div with same class name

I want to do a mousemove on mutiple divs with the same class name but the mouse position ain't restart inside of each divs.
here is the demo
here is my code:
<body>
<div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-360_slide360_02.jpg);"><section class="slider"></section></div>
<div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-360_slide360_01.jpg);"><section class="slider"></section></div>
<div class="reference" id="landing-content3"><section class="slider"></section></div>
<div class="reference" id="landing-content4"><section class="slider"></section></div>
<div class="reference" id="landing-content5"><section class="slider"></section></div>
<div class="reference" id="landing-content6"><section class="slider"></section></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</body>

$(document).ready(function(){
 $('.reference').mousemove(function(e){
  var x = -(e.pageX + this.offsetLeft) / 1.15;
  var y = -(e.pageY + this.offsetTop) / 1.15;
  $(this).css('background-position', x + 'px ' + y + 'px');
  $(this).css('transition', 'background-position 1.5s ease-out');
 });
});

A:

Wrap your .reference element with another element. And set it's position to relative. Also use e.offsetX and e.offsetY instead of e.pageX and e.pageY.Then the issue you are having will be resolved.
Working example

$(document).ready(function() {
  $('.reference').mousemove(function(e) {
    var x = -(e.offsetX + this.offsetLeft) / 1.15;
    var y = -(e.offsetY + this.offsetTop) / 1.15;
    $(this).css('background-position', x + 'px ' + y + 'px');
    $(this).css('transition', 'background-position 1.5s ease-out');
  });
});
.sliderBlock {
  position: relative;
  overflow: hidden;
}

#landing-content {
  overflow: hidden;
  width: 100%;
  margin: 10px 0 0 0;
  background-size: 190% 190%;
  background-repeat: no-repeat;
  max-height: 500px;
}

#landing-content3 {
  overflow: hidden;
  background-image: url(http://virtualtourpro.com.au/wp-content/uploads/2012/03/Kitchen-Dining-360.jpg);
  width: 100%;
  margin: 10px 0 0 0;
  background-size: 190% 190%;
  background-repeat: no-repeat;
  max-height: 500px;
}

#landing-content4 {
  overflow: hidden;
  background-image: url(https://www.starkwoodmediagroup.com/assets/img/panorama/360-image.jpg);
  width: 100%;
  margin: 10px 0 0 0;
  background-size: 190% 190%;
  background-repeat: no-repeat;
  max-height: 500px;
}

#landing-content5 {
  overflow: hidden;
  background-image: url(http://www.radschlag.at/wp-content/uploads/2016/01/Panorama-2.jpg);
  width: 100%;
  margin: 10px 0 0 0;
  background-size: 190% 190%;
  background-repeat: no-repeat;
  max-height: 500px;
}

#landing-content6 {
  overflow: hidden;
  background-image: url(http://www.easypano.com/gallery/panoweaver/201112021732/panoramamic.jpg);
  width: 100%;
  margin: 10px 0 0 0;
  background-size: 190% 190%;
  background-repeat: no-repeat;
  max-height: 500px;
}

.slider {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding-top: 100%;
  max-width: 1002px;
}
<title>Parallax</title>

<body>
  <div class="sliderBlock">
    <div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-360_slide360_02.jpg);">
      <section class="slider"></section>
    </div>
  </div>
  <div class="sliderBlock">
    <div class="reference" id="landing-content" style="background-image: url(http://www.samsung.com/fr/consumer/mobile-devices/smartphones/galaxy-s/galaxy-s7/gear-360/images/gear-360_slide360_01.jpg);">
      <section class="slider"></section>
    </div>
  </div>
  <div class="sliderBlock">
    <div class="reference" id="landing-content3">
      <section class="slider"></section>
    </div>
  </div>
  <div class="sliderBlock">
    <div class="reference" id="landing-content4">
      <section class="slider"></section>
    </div>
  </div>
  <div class="sliderBlock">
    <div class="reference" id="landing-content5">
      <section class="slider"></section>
    </div>
  </div>
  <div class="sliderBlock">
    <div class="reference" id="landing-content6">
      <section class="slider"></section>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</body>

JSfiddle

