[Javascript] 마우스따라 움직이는 bar

위와 같이 각 번호에 마우스를 올리면 밑에 바가 자연스럽게 옆으로 움직이는 애니메이션을 만들어보았다.

 

HTML

  <div class="section">

    <ul class="row">

      <li class="content">1번임</li>

      <li class="content">2번임</li>

      <li class="content">3번임</li>

      <li class="content">4번임</li>

      <li class="content">5번임</li>

      <div class="line"></div>

    </ul>

  </div>

 

 

CSS

.row{

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 300px;

  position: relative;

}

li{

  width: 250px;

  height: 200px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 40px;

  cursor: pointer;

  transition: all 0.3s;

}

li:hover{

  color: crimson;

}

.line{

  position: absolute;

  height: 20px;

  background: crimson;

  bottom: 0;

  transition: left 0.3s;

}

자바스크립트로 left값을 조절할 것이기 때문에 transition을 left값에 부여했다.

 

JAVASCRIPT

for(let i = 0; i < document.querySelectorAll('.content').length; i++){

 

  document.querySelectorAll('.content')[i].addEventListener('mouseover',function(){

 

    let contentX = document.querySelectorAll('.content')[i].getBoundingClientRect().x;

 

    let contentWidth = document.querySelectorAll('.content')[i].getBoundingClientRect().width;

 

    document.querySelector('.line').style.left = `${contentX}px`;

 

    document.querySelector('.line').style.width = `${contentWidth}px`;

 

  });

 

  document.querySelectorAll('.content')[i].addEventListener('mouseout',function(){

 

    document.querySelector('.line').style.width = 0;

 

  })

}

for반복문으로 li에 마우스를 올리면 line의 left값과 width값을 li와 동일하게 조절되도록 코드를 짰다.

getboundingClientRect().x 를 하면 요소의 x좌표 값을, width를 하면 요소의 width값을 찾아준다.

찾은 x좌표의 값과 width값을 line의 left와 width의 css에 부여하는 방식으로 했다.

그리고 li에서 마우스가 나가면 width만 0으로 만들고 left값은 그대로 놔두었다.

 

위의 것을 잘 이용하면 평소에 nav바 만들 때 이쁘게 구현할 수 있을 것이다.