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

181_자바스크립트 요소 채도 조절하기

[적용]

• 요소에 모노크롬 효과를 주고 싶을 때

---

[내용]

채도의 조절은 CSS의 filter 속성에 grayscale() 메소드를 사용한다.

기본 상태는 grayscale(0%)이며, 인수의 값이 100%이며 모노크롬 효과를 낸다.

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

 

CSS Transitions를 사용한 샘플

CSS                                                                                                                                                                      style.css

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

.rect.state-show {
  filter: grayscale(100%);
}

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

 

 

 

---

 

 

 

 

 

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