JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<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>

CSS

.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;
}

JavaScript

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