인터랙티브 웹 개발(mouse move, transition 활용 예제)

mouse move 활용 예제 1

---

예제보기

마우스 움직임에 따라 이미지가 조금씩 움직이는 예제

HTML

    <img src="./images/layer-9.png" class="pipe" alt="파이프">
    <img src="./images/layer-7.png" class="human" alt="여자사람">
    <img src="./images/layer-1.jpg" class="bg" alt="배경>

CSS

    *{ 
      box-sizing: border-box;
      padding: 0; 
      margin: 0;
    }
    body {
      position: relative;
      overflow: hidden;
    }
    h1 {
      
    }
    .human {
      position: absolute;
      width: 300px;
      left: calc(50% - 150px);
      z-index: 9;
    }
    .pipe {
      position: absolute;
      width: 400px;
      left: calc(-3% - 150px);
      z-index: 9;
    }
    .bg {
      width: 120%;
      height: 120%;
      position: fixed;
    }

JS

    let human;
    let bg;
    let pipe;

    let x = 0;
    let y = 0;
    let mx = 0;
    let my = 0;
    let speed = 0.009;

    window.onload = function() {
      human = document.getElementsByClassName("human")[0];
      bg = document.getElementsByClassName("bg")[0];
      pipe = document.getElementsByClassName("pipe")[0];

      window.addEventListener('mouseover', mouseFunc, false);

      function mouseFunc(e){
        x = (e.clientX - window.innerWidth / 2);
        y = (e.clientY - window.innerWidth / 2);
      }
      loop();
    }

    function loop() {
      mx += (x - mx) * speed;
      my += (y - my) * speed;

      // "translate("+ -mx + "px, " + -my + "px)" -값을 주면 이미지가 마우스 반대로 움직인다.
      human.style.transform = "translate("+ -(mx/10) + "px, " + -(my/10) + "px)";
      bg.style.transform = "translate("+ (mx/20) + "px, " + (my/20) + "px)";
      pipe.style.transform = "translate("+ -(mx/30) + "px, " + -(my/30) + "px)";

      window.requestAnimationFrame(loop)
    }

mouse move 활용 예제 2

---

예제보기

마우스 움직임에 따라 이미지가 조금씩 움직이는 예제

HTML

    <img src="https://paidpost-assets.nyt.com/paidpost/allbirds/birds-eye-view/images/1-b90e91a4.png" alt="">
    <img src="https://paidpost-assets.nyt.com/paidpost/allbirds/birds-eye-view/images/2-f3fd6cf5.png" alt="">
    <div class="vod"><video autoplay playsinline loop src="https://paidpost-assets.nyt.com/paidpost/allbirds/birds-eye-view/videos/3-27c8c3ea.webm"></video></div>
    <img src="https://paidpost-assets.nyt.com/paidpost/allbirds/birds-eye-view/images/4-105dd65b.png" alt="">
    <img src="https://paidpost-assets.nyt.com/paidpost/allbirds/birds-eye-view/images/5-ac49bfdc.png" alt="">

CSS

    body {
      background-color: #eefcfd;
      position: relative;
      overflow: hidden;
    }
    section {
      width: 100%;
      height: 100%;
    }
    img {
      position: absolute;
      width: 50%;
    }
    .vod video{
      position: absolute;
      width: 50%;
    }

JS

    let x = 0;
    let y = 0;
    let mx = 0;
    let my = 0;
    let speed = 0.009;
    let _imgArr;
    let vod;

    window.onload = function() {
      _imgArr = document.getElementsByTagName("img");
      vod = document.getElementsByClassName("vod")[0];
      // alert(_imgArr.length)
      window.addEventListener('mouseover', mouseFunc, false);

      function mouseFunc(e){
        x = (e.clientX - window.innerWidth / 2);
        y = (e.clientY - window.innerWidth / 2);
      }
      loop();
    }

    function loop() {
      mx += (x - mx) * speed;
      my += (y - my) * speed;

      // _imgArr[0].style.transform = "translate("+ -(mx/6) + "px, " + -(my/6) + "px)";
      _imgArr[1].style.transform = "translate("+ -(mx/5) + "px, " + -(my/5) + "px)";
      _imgArr[2].style.transform = "translate("+ -(mx/3) + "px, " + -(my/3) + "px)";
      _imgArr[3].style.transform = "translate("+ -(mx/2) + "px, " + -(my/2) + "px)";
      vod.style.transform = "translate("+ -(mx/10) + "px, " + -(my/10) + "px)";

      window.requestAnimationFrame(loop)
    }

브라우저 내에서 마우스 위치값을 브라우저 왼쪽 상단이 아닌

브라우저 가운데가 중심이 되게 바꿔주는 게 핵심입니다.

예를들어 브라우저 width가 900일 경우 마우스 위치값이 0부터 900 까지 찍힐텐데,

거기서 브라우저 width / 2 를 해서 빼주는 것.

x = e.clientX (마우스x) - window.innerWidth / 2 (화면 사이즈 /2)

이렇게 되면 0~900 이 아닌 -450 ~ 450 까지 찍히게 됩니다.

translate() 외에도 scale(), rotate() 등 다양하게 테스트 해보세요.

transform = "rotate(" + 변하는 값 + "deg)"