Блог

Главная - Вопросы по программированию - Javascript постепенно изменяет насыщенность

Javascript постепенно изменяет насыщенность

#javascript #html #css #frontend #addeventlistener

Вопрос:

У меня есть некоторый код, чтобы при нажатии клавиши c насыщенность увеличивалась, а когда клавиша c будет поднята, она вернется в нормальное состояние. Мне интересно, как я могу сделать так, чтобы вместо мгновенного изменения уровня насыщенности насыщенность постепенно изменялась в течение половины секунды, а когда клавиша c будет поднята, насыщенность постепенно уменьшится в течение половины секунды до нормального уровня насыщенности. Как это можно сделать? Текущий код:

 document.addEventListener("keydown", e => {
  if (e.code === "KeyC") {
document.body.style.filter = "saturate(1.7)";

    
    
    
    }
}, false)

document.addEventListener("keyup", e => {
  if (e.code === "KeyC") {
  document.body.style.filter = "";

  
  }
}, false)

Ответ №1:

Я бы использовал переход CSS, чтобы получить постепенное изменение. Тогда вместо установки значения насыщения с помощью javascript вы можете просто сделать .classList.add('saturated') и .classList.remove('saturated') на элементе. Я привел пример с div:

 #myDiv{
  width:200px;
  height:200px;
  background-color: lightblue;
  filter: saturate(1);
  transition: filter 1s ease;
}

#myDiv.saturated {
  filter: saturate(4);
}

вот рабочий пример на JSFiddle: https://jsfiddle.net/martinnester/07fsL2ge/20/

Комментарии:

1. Пример отлично работает, но только с определенным div. Мне нужно изменить насыщенность тела. Есть ли способ получить тот же эффект, но с телом документа?

2. @AidanYoung — так почему body бы вместо этого не использовать селекторы body.saturated и? Обновите JS, чтобы он был нацелен на элемент тела, и Вуаля!

3. @AidanYoung Я обнаружил, что при этом к телу свойство фильтра не применяется, но если вы добавляете цвет фона в html, это исправляет его. Оглянитесь на скрипку, которую я изменил, чтобы она была для тела.

4. Я попробовал, и это отлично работает, спасибо!

Метки: