JSFiddle - React, Tailwind, and code Playground

by ErgĂĽn YILDIZ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div id="container">
  <div class="image1">
    <img src="http://www.bsmenajerlik.com/sites/default/files/imageblock/logo1.png">
  </div>

  <div class="image2">
    <img src="http://www.bsmenajerlik.com/sites/default/files/inline/images/logo2.png">
  </div>
</div>

CSS

body{
  background: #3b6e94;
}
#container{
  width:100%; height:100%; position:absolute;
}
.image1 {
  position: absolute;
  margin: -75px 0 0 -75px;
  left: 50%;
  top: 50%;
  perspective: 300px;
  z-index: 9;
}
.image2 {
  position: absolute;
  margin: -75px 0 0 -75px;
  left: 50%;
  top: 50%;
  perspective: 300px;
  
}
img {
  display: block;
  width: 150px;
  height: 150px;
}

JavaScript

var theLogo = $(".image1 img");
var theShadow = $(".image2 img");  

$("body").mousemove(function(event) {

  point0x = $(window).height() / 2;
  mousePointX = event.clientY - point0x / 15;
  point0y = $(window).width() / 2;
  mousePointY = event.clientX - point0y / 15;

  TweenMax.to(theShadow, .5, {y:(point0x - mousePointX) /8, x:(point0y - mousePointY) /8, ease:Quad.easeOut});
  TweenMax.to(theShadow, .5, {rotationX:(point0x - event.clientY) * 0.1, ease:Quad.easeOut}); 
  TweenMax.to(theShadow, .5, {rotationY:0 - ((point0y - event.clientX ) * 0.1), ease:Quad.easeOut});

  TweenMax.to(theLogo, .5, {rotationX:(point0x - event.clientY ) * 0.1, ease:Quad.easeOut}); 
  TweenMax.to(theLogo, .5, {rotationY:0 - ((point0y - event.clientX ) * 0.1), ease:Quad.easeOut});

});