[2015.12.04] 마우스 위치에 따른 프로필 사진 변경 아이디어

아주 간단하면서도 재미있는 아이디어군요 ㅎㅎ

내용은 별로 안되니 간단하게 정리해보면,

display 는 flex, 높이 단위는 vh 가 사용된걸 볼수 있구요

원모양을 만들기 위해서 border-radius : 50% 로 사용했구요.

작동 원리는 마우스의 X 좌표에 대응하여 옆으로 길게 붙어있는 프사이미지에서 

보여줄 구간만 이동하면서 이미지가 교체된것처럼 보이게 하는군요.

아이디어 참고하셔서 잘 응용해보시기 바랍니다.ㅎㅎ

  

* CSS

body {
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

div {
  border:5px solid white;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/faces.jpg) left top / auto 150px repeat;
}

* Javascript

//Change my little head
    var face = document.querySelector("div");
    function updateHead(e){
        var mouseX = Math.floor((window.innerWidth-e.clientX)/(window.innerWidth)*9);
        face.style.backgroundPosition = mouseX*150+"px center";
    };
    window.addEventListener("mousemove", updateHead);

​

간단한 사용 예제 및 Demo

See the Pen Face swap by Louis Hoebregts (@Mamboleoo) on CodePen.