[JavaScript]hover시 이미지 나타내기

안녕하세요 무택입니다 :)

오늘은 JS를 이용해서 최신 웹디자인 및 퍼블리싱 카피를 해보려고 합니다. 기능은 마우스 올렸을 때 이미지가 나타나서 마우스를 따라다니는 기능입니다. 아래에서 자세한 내용을 살펴봅시다😀

 

HTML/CSS

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap" rel="stylesheet">

<style>
  * {list-style: none; padding: 0; margin: 0;}
  body { background-color: #131313;}
  ul {position: relative;}
  ul li p {margin: 0rem 0; font-size: 120px; font-family: 'Cormorant Garamond', serif; font-weight: 500; color: #fff; border-bottom: 1px solid #fff; transition: all .25s ease; padding-left: 20px;}
  ul li p:hover {color: #ff4747; cursor: pointer;}
  ul li .div_wrap {position: absolute; top: 0; left: 0; visibility: hidden; z-index: -99;}
  ul li .div_wrap img {transform: translate(-50%, -50%); position: absolute; opacity: .75;}
</style>

<ul id="list_ul">
  <li class="list_li">
    <p>ALL</p>
    <div class="div_wrap"><img src="https://i.ibb.co/RPhypYM/all.png"></div>
  </li>
  <li class="list_li">
    <p>IMAGE</p>
    <div class="div_wrap"><img src="https://i.ibb.co/XXhvM0s/image.png"></div>
  </li>
  <li class="list_li">
    <p>VIDEO</p>
    <div class="div_wrap"><img src="https://i.ibb.co/CbgRcrT/video.png"></div>
  </li>
  <li class="list_li">
    <p>FILM</p>
    <div class="div_wrap"><img src="https://i.ibb.co/f0hbz85/image-15.png"></div>
  </li>
</ul>

 

JS

const div_wraps = document.querySelectorAll('.div_wrap');
document.getElementById('list_ul').addEventListener('mousemove', function(e){
  const x = e.clientX;
  const y = e.clientY;
  div_wraps.forEach(function(div){
    div.style.transform = `translate(${x}px, ${y}px)`;
  });
});

const list = document.querySelectorAll('.list_li');
// forEach의 arrow function
list.forEach(li_img => {
  li_img.addEventListener('mouseover', function(){
    li_img.querySelector('.div_wrap').style.visibility = 'visible';
  });
  li_img.addEventListener('mouseleave', function(){
    li_img.querySelector('.div_wrap').style.visibility = 'hidden';
  });
});

 

Codepen

See the Pen [JavaScript]hover시 이미지 나타내기 by TytanLee (@TytanLee) on CodePen.

 

 

 

구현하게 된 배경

출처 : 뮤자인 홈페이지

최근 웹 사이트를 돌아다니다 보니 위와 같이 텍스트에 마우스를 올리면 이미지가 나오는 디자인을 볼 수 있었습니다. 보고 좋은 컨셉의 디자인이라고 생각이 들었고 능력이 되면 따라 해보고 싶었습니다. 근데 이제 위 기능이 어떻게 구현되는지 알 수 있는 능력이 되어서 따라서 구현해 보게 되었습니다.

 

코드 설명

코드 단계는 아래와 같습니다.

- 지정한 영역에서 마우스가 움직이면 기능 실행

- 마우스의 좌표 구하기, 보여줄 이미지를 마우스 좌표에 따라 이동

(`img`는 `div`가 감싸고 있어야 하며, `div`에 `translate`를 주고 `img`에는 `translate(-50%, -50%)`를 줘야 마우스 가운데 위치에 맞게 됩니다.)

- 지정한 영역에 마우스가 들어오면 텍스트에 맞는 이미지 노출 및 비노출

 

const div_wraps = document.querySelectorAll('.div_wrap');
document.getElementById('list_ul').addEventListener('mousemove', function(e){
    const x = e.clientX;
    const y = e.clientY;
    div_wraps.forEach(function(div){
        div.style.transform = `translate(${x}px, ${y}px)`;
    });
});

자주 사용할 부분을 변수로 만들고 지정한 영역에 들어오면 마우스 좌표를 구하고 이미지를 좌표에 따라 이동시켜 줍니다.

`forEach`는 배열을 반복시켜 주는 메서드입니다.

위에서 `div_wraps`는 `.div_wrap`클래스를 가진 요소들을 담은 배열이고 function안의 `div`는 배열이 갖고 있는 각각의 요소들을 가리킵니다. 그리고 그 각각의 요소들은 괄호 안의 코드를 실행하면서 모든 배열들이 반복하게 됩니다.

const list = document.querySelectorAll('.list_li');
// forEach의 arrow function
list.forEach(li_img => {
    li_img.addEventListener('mouseover', function(){
        li_img.querySelector('.div_wrap').style.visibility = 'visible';
    });
    li_img.addEventListener('mouseleave', function(){
        li_img.querySelector('.div_wrap').style.visibility = 'hidden';
    });
});

마찬가지로 `forEach`를 사용해 배열 반복문을 만들어주고 `li`에 마우스가 들어오면 이미지가 노출되게 설정하고 나가면 비노출되게 설정해 줍니다.