@Evtera

Как передать несколько значений в IntersectionObserver threshold?

Здравствуйте. Есть функция, которая срабатывает при появлении блока в области видимости. Но я бы хотел еще сделать так, чтобы чем больше блок был на экране тем больше у него была прозрачность. Варианта вижу два:
1) задать несколько значений opacity на каждый threshold. Вопрос в том, как это сделать?
2) Если есть возможность, то привязать значение threshold к opacity. Таким образом, если threshold ,eltn 1, то и opacity будет 1

let observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.lastElementChild.classList.add(classes.image + "_active");
        entry.target.lastElementChild.style.opacity = 0.1;
      } else {
        entry.target.lastElementChild.classList.remove(classes.image + "_active");
      }
    });
  },
  {
    threshold: 0.2,
  }
);

block.forEach((value) => observer.observe(value));
  • Вопрос задан
  • 34 просмотра
Решения вопроса 1
bingo347
@bingo347 Куратор тега JavaScript
Бородатый программер
let observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.lastElementChild.classList.add(classes.image + "_active");
        entry.target.lastElementChild.style.opacity = entry.intersectionRatio;
      } else {
        entry.target.lastElementChild.classList.remove(classes.image + "_active");
      }
    });
  },
  {
    threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
  }
);

block.forEach((value) => observer.observe(value));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы