JSFiddle - React, Tailwind, and code Playground

by Marius Jopen

HTML

<div class="parent">
  <div class="child">
    <div class="item">1 hallo</div>
    <div class="item">1 hallo</div>
    <div class="item">1 hallo</div>
    <div class="item">1 hallo</div>
  </div>
</div>

CSS

* {
  margin: 0px;
}

.parent {
    background: yellow;
    width: 100vw;
    overflow-x: hidden;
}

.child {
  width: 200vw;
  display: flex;
}

.item {
  list-style: none;
  background: red;
  width: 50vw;
}

JavaScript

jQuery(document).on( "mousemove", function( event ) {
  
    	// PRIMARY 
      
      jQuery(".child").width(width);

      var width = 0;

      jQuery(".item").each(function(index) {
        width += parseInt( jQuery(this).outerWidth(true), 10 );
      });  
      
      var item = jQuery(".item").outerWidth();
      
      var mouseX = event.pageX;
      var windowWidth = jQuery(window).width(); 
  
      var factor = (width - windowWidth + item) / windowWidth ;        
      var result = (-1) * mouseX * factor;

      jQuery(".child").css( "margin-left", result);
     
  });