hover시 색이 변하는 애니메이션(with. box-shadow로 네온 효과)

1. 미리보기

box-shadow를 사용해 네온효과를 주고, 마우스가 지나가면 transition-duration을 달리 주어 색을 나타나게 하는 애니메이션을 만들어보자!

See the Pen js_100_day11 by KumJungMin (@kumjungmin) on CodePen.

2. 코드 설명

1) html

<div id="container">      <!--[1]-->
</div>

• [1] 부모요소이다. 이 부모요소 내부에 js를 사용해, 여러 개의 자식 요소를 만들 예정이다.

2) js

• [2] querySelector로 id="container"요소를 가져온다.

  const container = document.querySelector('#container');   //[2]
  const SQUARE_NUM = 500;   //자식요소 개수
  const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']; //랜덤색깔들

• [3]
  : setColorToEl함수는 마우스 hover시, 해당 요소에 색 & 그림자를 지정한다.
  : box-shadow은 4개의 인자값을 가진다. (수평그림자, 수직그림자, 흐림정도, 그림자가 드리우는 정도)
  : box-shadow에서 쉼표(,)를 사용하면 그림자들을 겹쳐 사용할 수 있다.

  function setColorToEl(element) {    //[3] set random color
    const color = getRandomColor();
    element.style.background = color;
    element.style.boxShadow = `0 0 2px ${color}, 0  0 10px ${color}`; 
      //(그림자를 겹치면 빛나는 네온 느낌 낼 수 있음!)
  }

• [4] removeColorFromEl함수는 moveover시, 해당 요소에 색 & 그림자를 변경한다.

  function removeColorFromEl(element) {   //[4]
      const color = getRandomColor();
      element.style.background = '#1d1d1d';
      element.style.boxShadow = `0 0 2px #000`; 
  }

• [5] getRandomColor함수는 colors(배열)에서 랜덤색깔을 return한다.

  function getRandomColor() {      //[5]
      return colors[Math.floor(Math.random()*colors.length)]
  }

• [6] 반복문을 사용해 SQUARE_NUM개의 자식요소를 생성하고 부모에 추가한다.

  for(let i=0; i<SQUARE_NUM; i++) {               //[6]
      const square = document.createElement('div');
      square.classList.add('square');
  
      square.addEventListener('mouseover', () => {
        setColorToEl(square);
      });
      square.addEventListener('mouseout', () => {
        removeColorFromEl(square);
      });
      container.appendChild(square);
  }

3) css

• [7] flex-wrap: wrap을 사용해 container 내부 자식요소들을 줄바꿈한다.

#container {
  display: flex;
  flex-wrap: wrap;         /*[7]*/
  max-width: 400px;
}

• [8] transition에 2s를 주어, 천천히 효과가 일어나게 한다.
• [9] 자식요소 hover시, transition-duration: 0s로 하여 효과가 빨리 일어나게 한다.
  => 위 두 코드로 인해, [moveover시 빠르게 효과 발생],[mouseout시 느리게 효과 발생] 하게 된다.

  .square {
    width: 16px;
      height: 16px;
      background-color: #1d1d1d;
      margin: 2px;
      box-shadow: 0 0 2px #000;
      transition: 2s ease;       /*[8]*/
      &:hover {
        transition-duration: 0s;    /*[9]*/
      }
  }