[책] 자바스크립트 코드 레시피 278 - 164일차

요소 크기 변경하기

• 버튼에 마우스 반응을 설정하고 싶을 때
• 특정 요소에 눈에 띄는 효과를 주고 싶을 때

설명

요소의 크기 변경은 CSS의 transform 속성과 scale() 메소드를 사용합니다. scale()의 인수가 1이면 원래 상태의 크기를 나타내며, 인수가 1보다 크면 확대, 작으면 축소합니다. 예를 들면 2는 두 배의 비율, 0.5는 절반의 비율을 나타냅니다. CSS Transitions와 Web Animations API의 샘플을 확인해봅니다.

실습

자바스크립트 코드 2가지 CSS transition, Web Animations API 사용할 수 있으니 사용해봅니다.

index.html

<div class="container">
  <div class="content">
    <div class="box"></div>
    <button class="button">버튼</button>
  </div>
</div>

---

style.css

.container {
  position: relative;
  width: 940px;
  height: 520px;
  background-color: #000080;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  width: 50px;
  height: 50px;
  background-color: #ff0000;
  margin-bottom: 100px;
  transition: all 0.5s;
}

.box.state-show {
  transform: scale(4);
}

---

script.js

// CSS transition 사용
const button = document.querySelector('.button');
button.addEventListener('click', handleClick);
function handleClick() {
  const box = document.querySelector('.box');
  if (box.classList.contains('state-show') === true) {
    box.classList.remove('state-show');
  } else {
    box.classList.add('state-show');
  }
}

// Web Animations API 사용
const button = document.querySelector('.button');
let scope = 0; // if 스코프 활용
button.addEventListener('click', handleClick);
function handleClick(event) {
  const box = document.querySelector('.box');
  if (scope === 0) { // if 스코프 활용
    box.animate(
      {
        transform: [
          'scale(1)', // 시작 값
          'scale(5)', // 종료 값
        ]
      },
      {
        duration: 500,
        fill: 'forwards',
        easing: 'ease',
      }
    )
    scope = 1; // if 스코프 활용
  } else {
    box.animate(
      {
        transform: [
          'scale(5)', // 시작 값
          'scale(1)', // 종료 값
        ]
      },
      {
        duration: 500,
        fill: 'forwards',
        easing: 'ease',
      }
    )
    scope = 0; // if 스코프 활용
  }
}

응용

실습했던 코드랑 유사하니 직접 해봅니다. 아래의 4가지보다 많은 것들 응용할 수 있습니다.

• 요소 이동하기
• 요소 투명도 조절하기
• 요소 밝기 조절하기
• 요소 채도 조절하기