JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div id="container">
  <div class="element">
    <div id="g-img"></div>
    <div id="fire-1"></div>
    <div id="fire-2"></div>
  </div>
</div>

CSS

#container {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.element {
  width: 300px;
  height: 450px;
  border-radius: 10px;
  background: #000;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.2),
    0 6px 6px rgba(0, 0, 0, 0.2);
  border: 3px solid #fff;
}

#g-img {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/n24j6jzvper1r79f6tpaxz0rlczcztz.png")
    center/cover;
  background-repeat: no-repeat;
}

#fire-1 {
  display: block;
  position: absolute;
  left: calc(50% - 100px); /* 向左偏移100px */
  top: calc(50% - 50px); /* 向上偏移50px */
  width: 100px;
  height: 100px;
  background: url("https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/fire.gif");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#fire-2 {
  display: block;
  position: absolute;
  left: calc(50% + 100px); /* 向右偏移100px */
  top: calc(50% + 50px); /* 向下偏移50px */
  width: 100px;
  height: 100px;
  background: url("https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/fire.gif");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

JavaScript

// https://codepen.io/SahilAFX/pen/OxeeNV

$("#container").mousemove(function (e) {
  parallaxIt(e, "#fire-1", -140)
  parallaxIt(e, "#fire-2", 120)
  parallaxIt(e, ".element", -30)
  parallaxIt(e, "#g-img", -20)
})

function parallaxIt(e, target, movement) {
  var $this = $("#container")
  var relX = e.pageX - $this.offset().left
  var relY = e.pageY - $this.offset().top

  TweenMax.to(target, 1, {
    x: ((relX - $this.width() / 2) / $this.width()) * movement,
    y: ((relY - $this.height() / 2) / $this.height()) * movement,
  })
}