[JavaScript] 자바스크립트 요소 밝기 조절하기

180_자바스크립트 요소 밝기 조절하기

[적용]

• 발기를 조절하여 요소를 눈에 띄게 만들고 싶을 때
• 포커스 상태 효과를 주고 싶을 때

---

[내용]

밝기 조절은  CSS의 filter 속성에 brightness() 메소드를 사용하며, brightness(100%)가 기본 상태다.

인수가 100%보다 크면 밝아지고 작으면 어두워진다.

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

 

CSS Transitions를 사용한 샘플

CSS                                                                                                                                                                      style.css

.rect {
  ...생략...
  
  filter: brightness(100%);
  transition: all 0.5s;
}

.rect.state-show {
  filter: brightness(300%);
}

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(
  {
    filter: [
      'brightness(100%)',  // 시작 값
      'brightness(300%)'  // 종료 값
    ]
  },
  {
    duration: 500,  // 밀리초 지정
    fill: 'forwards',  // 종료 시 속성을 지님
    easing: ;ease'  // 가속도 종류
  }
};

 

---

 

 

 

 

 

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