JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<div class="mirror">
  <div class="el"></div>
  <span>Start 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 End</span>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

.mirror {
  position: relative;
  width: 1800px;
  height: 1800px;
  background: green;
  
  transition: transform 3s linear;
}

.el {
  position: absolute;
  width: 50px;
  height: 20px;
  bottom: 0;
  left: 0;
  background: #000;
}

JavaScript

// add prefix to translate

var mirror = $('.mirror');
	
$(window).on('mousemove',function(e) {
  var pageX = Math.round(e.pageX / $(this).width() * 100),
  		pageY = Math.round(e.pageY / $(this).height() * 100);
      
	var shiftLeft = mirror.width() - $(window).width(),
  		shiftUp = mirror.height() - $(window).height();
  
  if ( pageX >= 50 ) {
    mirror.css({     
      'transform' : 'translate3d(-'+ shiftLeft +'px, -'+ shiftUp +'px, 0)'
    });
  } else {
    mirror.css({
      'transform' : 'translate3d(0,0,0)'
    });   
  }
  
	if ( pageY >= 50 ) {
    mirror.css({
      'transform' : 'translate3d(-'+ shiftLeft +'px, -'+ shiftUp +'px, 0)'
    });
  } else {
    mirror.css({
      'transform' : 'translate3d(0,0,0)'
    });   
  }
  
});




      
	// console.log(pageX);	
  
  // Math.round

/*   $('.mirror__item').css({
    '-webkit-transform' : 'translateX(' + -pageX/15 + '%) translateY(' + -pageY/15 + '%)',
    'transform' : 'translateX(' + -pageX/15 + '%) translateY(' + -pageY/15 + '%)'
  }); */