18강 - mousemove effect

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<img class="mousemove-effect-1-el" data-mousemove-effect1-hor-res="0.05" data-mousemove-effect1-ver-res="0.05" src="https://www.gimhae.go.kr/_res/portal/img/sub/05/p01047_img8.png" alt="">

<img class="mousemove-effect-1-el" data-mousemove-effect1-hor-res="0.01" data-mousemove-effect1-ver-res="0.01" src="https://file.miricanvas.com/template_thumb/2023/07/25/14/10/kkq8tytycnooum74/thumb.jpg" alt="">

img {
  width: 200px;
}

function MousemoveEffect1__start() {
  const $window = $(window);

  let windowWidth = $window.width();
  let windowHeight = $window.height();

  $window.resize(_.throttle(function () {
    windowWidth = $window.width();
    windowHeight = $window.height();
  }, 100));

  $window.resize(_.throttle(function () {
    MousemoveEffect1__update();
  }, 100));

  let MousemoveEffect1__$el = null;
  let MousemoveEffect1__lastPosX = 0;
  let MousemoveEffect1__lastPosY = 0;

  function MousemoveEffect1__update() {
    MousemoveEffect1__$el.each(function (index, node) {
      const $node = $(node);
      const horRes = $node.data('data-mousemove-effect1-hor-res');
      const verRes = $node.data('data-mousemove-effect1-ver-res');

      const x = (MousemoveEffect1__lastPosX - (windowWidth / 2)) * horRes;
      const y = (MousemoveEffect1__lastPosY - (windowHeight / 2)) * verRes;
      $(node).css('transform', 'translateX(' + x + 'px) translateY(' + y + 'px)');

      console.log("MousemoveEffect1__lastPosX : " + MousemoveEffect1__lastPosX);
      console.log("MousemoveEffect1__lastPosY : " + MousemoveEffect1__lastPosY);
    });
  }

  function MousemoveEffect1__init() {
    MousemoveEffect1__$el = $('.mousemove-effect-1-el');

    MousemoveEffect1__$el.each(function (index, node) {
      const $node = $(node);
      $node.data('data-mousemove-effect1-hor-res', $node.attr('data-mousemove-effect1-hor-res') * 1);
      $node.data('data-mousemove-effect1-ver-res', $node.attr('data-mousemove-effect1-ver-res') * 1);
    });

    const MousemoveEffect1__updateThrottled = _.throttle(function () {
      MousemoveEffect1__update();
    }, 10);

    $window.mousemove(function (e) {
      MousemoveEffect1__lastPosX = e.clientX;
      MousemoveEffect1__lastPosY = e.clientY;

      MousemoveEffect1__updateThrottled();
    });
  }
  
  MousemoveEffect1__init();
}

MousemoveEffect1__start();

• codepen으로 정리된 코드 한번에 보기