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

Question

[Evtera]

Здравствуйте. Есть функция, которая срабатывает при появлении блока в области видимости. Но я бы хотел еще сделать так, чтобы чем больше блок был на экране тем больше у него была прозрачность. Варианта вижу два:
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));

Answer 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 = 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));

Comments

[Evtera]

Спасибо!

[Evtera]

а можно ли как-то передать значение entry.intersectionRatio в threshold?

[Дмитрий Беляев]

Evtera, зачем?
threshold - это запрос, "уведомляй когда пересечение будет вот в таких процентах"
intersectionRatio - это результат этого запроса, "ты просил уведомить, сейчас пересечение имеет такой-то процент"