[JavaScript] 자바스크립트 요소 크기 변경하기

177_자바스크립트 요소 크기 변경하기

[적용]

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

---

[내용]

요소의 크기 변경은 CSS의 transform 속성과 scale() 메소드를 사용한다.

sclae()의 인수가 1이면 원래 상태의 크기를 나타내며, 인수가 1보다 크면 확대, 작으면 축소한다.

예를 들면 2는 두 배의 비율, 0.5는 절반의 비율을 나타낸다.

CSS Transitions와 Web Animations API의 예시를 확인해 보자.

 

CSS Transitions를 사용한 샘플

CSS (부분)                                                                                                                                                           style.css

.rect {
  ...생략...
  
  transition: all 0.5s;
}

.rect.state-show {
  transform: sclae(4);
}

JavaScript (부분)                                                                                                                                               main.js

const element = document.querySelector('.rect');
if (element.classList.contains('state-show') === true) {
  element.classList.remove('state-show');
} else {
  element.classList.add('state-show');
}

 

Web Animations API를 사용한 샘플

JavaScript (부분)                                                                                                                                               main.js

const element = document.querySelector('.rect');
element.animate(
  {
    transform: [
      'scale(1)',  // 시작 값
      'scale(5)'  // 종료 값
    ]
  },
  {
    durations: 500,  // 밀리초 지정
    fill: 'forwards',  // 종료 시 속성을 지님
    easing: 'ease'  // 가속도 종류
  }
);

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김