css animation, hover시 색이 변하는 이벤트

gicomong·2020년 12월 7일
7

css animation

목록 보기
14/17
post-thumbnail

1. preview

> 마우스가 지나가면 색이 변하는 애니메이션을 만들어보자!

!codepen[kumjungmin/embed/GRjZVjY?height=265&theme-id=dark&default-tab=js,result]

2. 코드 설명

1) html

<div id="container">      <!--[1]-->
</div>
  • [1] 부모요소이다. 이 부모요소 내부에 js를 사용해, 여러 개의 자식 요소를 만들 예정이다.


2) js

  • [2] querySelectorid="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] transition2s를 주어, 천천히 효과가 일어나게 한다.
  • [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]*/
  }
}
profile
⚠ 이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다🙇🏼

2개의 댓글

comment-user-thumbnail
2020년 12월 8일

와.. 정민양 너무 멋지다요!!

1개의 답글