マウス追従パララックスヒーロー

<div class="d01-01-03-hero">
          <div class="d01-01-03-bg">
            <span class="d01-01-03-o d01-01-03-o1"></span>
            <span class="d01-01-03-o d01-01-03-o2"></span>
            <span class="d01-01-03-o d01-01-03-o3"></span>
          </div>
          <div class="d01-01-03-fg">
            <h1>視線を、奪う。</h1>
            <p>マウスに反応する奥行きが、ページに立体感を生み出します。</p>
          </div>
        </div>

.prev.d01-01-03{padding:0;display:block;min-height:320px}
        .d01-01-03-hero{position:relative;height:320px;overflow:hidden;background:linear-gradient(160deg,#0f1626 0%,#1f2b4a 100%);display:flex;align-items:center;justify-content:center}
        .d01-01-03-bg{position:absolute;inset:-40px;transition:transform .2s ease-out;will-change:transform}
        .d01-01-03-o{position:absolute;border-radius:50%;filter:blur(2px)}
        .d01-01-03-o1{width:120px;height:120px;left:12%;top:18%;background:radial-gradient(circle at 35% 35%,#4a7cff,#2643a0)}
        .d01-01-03-o2{width:70px;height:70px;right:16%;top:12%;background:radial-gradient(circle at 35% 35%,#ff7ab8,#a03a72)}
        .d01-01-03-o3{width:90px;height:90px;right:24%;bottom:10%;background:radial-gradient(circle at 35% 35%,#3ee0c3,#1a8a76)}
        .d01-01-03-fg{position:relative;text-align:center;padding:24px;transition:transform .2s ease-out;will-change:transform}
        .d01-01-03-fg h1{color:#fff;font-size:25px;font-weight:700;letter-spacing:.1em;margin:0 0 12px}
        .d01-01-03-fg p{color:rgba(255,255,255,.75);font-size:12.5px;line-height:1.9;margin:0}

(function(){
        var hero=document.querySelector('#item-01-01-03 .d01-01-03-hero');
        if(!hero)return;
        var bg=hero.querySelector('.d01-01-03-bg'),fg=hero.querySelector('.d01-01-03-fg');
        hero.addEventListener('mousemove',function(e){
          var r=hero.getBoundingClientRect();
          var x=(e.clientX-r.left)/r.width-.5;
          var y=(e.clientY-r.top)/r.height-.5;
          bg.style.transform='translate('+(x*24)+'px,'+(y*18)+'px)';
          fg.style.transform='translate('+(x*-12)+'px,'+(y*-9)+'px)';
        });
        hero.addEventListener('mouseleave',function(){
          bg.style.transform='translate(0,0)';
          fg.style.transform='translate(0,0)';
        });
      })();