[JavaScript] 자바스크립트 요소 투명도 조절하기

179_자바스크립트 요소 투명도 조절하기

[적용]

• 비표시 상태가 되는 요소 효과를 주고 싶을 때

---

[내용]

CSS의 opacity 속성을 사용해 요소의 불투명도를 조절한다.

opacity가 1일 때는 완전 불투명 상태이며, 0일 때는 완전 투명 상태, 0.5는 반투명 상태다.

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

 

CSS Transitions를 사용한 샘플

CSS                                                                                                                                                                      style.css

.rect {
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  background: white;
  top: 100px;
  
  transition: all 0.5s;
}

.rect.state-show {
  opacity: 0.5;
}

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(
  {
    opacity: [
      1.0,  // 시작 값
      0.5  // 종료 값
    ]
  },
  {
    durations: 500,  // 밀리초 지정
    fill: 'forwards',  // 종료 시 속성을 지님\
    easing: 'ease'  // 가속도 종류
  }
};

 

 

---

 

 

 

 

 

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