Смена изображений при скролле
 

Приветствую! Подскажите, как реализовать подобный эффект - смена изображения при скролле (слева).

https://www.select-group.ae/developm...g-business-bay



Спасибо!

Можно с IntersectionObserver сделать

https://developer.mozilla.org/en-US/...n_Observer_API

А пример кода не подскажете?

В общем сделал таким способом, но не нравится то, что первое и последнее изображение быстро пропадают (удаляется класс visible). Это можно как то отрегулировать? Какой только threshold не пробовал, не подходит.

const items = Array.from(document.querySelectorAll('.grid .block'));
const imgs = document.querySelectorAll('.fading img');

function detectIntersection(entries) {
  for (let e of entries) {
    let i = items.indexOf(e.target);
    if (e.isIntersecting) {
      requestAnimationFrame(ts => {
        e.target.classList.add('visible');
        imgs[i].classList.add('visible');
      });
    } else {
      e.target.classList.remove('visible');
      imgs[i].classList.remove('visible');
    }
  }
}

const options = {
  threshold: 0.5
};

const observer = new IntersectionObserver(
  detectIntersection, options
);

items.forEach(i => observer.observe(i));

samdo,

по твоей ссылке изображения не удаляются, у них просто плавно меняется opacity (прозрачность). Там зачем-то сделали анимацию на js, но ты можешь сделать по нормальному - через стиль transition в css

Я бы с удовольствием сделал это на чистом css, но как отследить скролл. Ведь смена происходит именно при скролле. Если останавливаемся, то изображение не меняется. Плюс, если скроллить вверх, то картинки меняются в обратном порядке.