Как сделать прогресс бар заливающий по очереди 3 картинки к моменту когда они оказываются в центре экрана

Question

у меня появилась такая задача, сделать что то на подобии прогресс бара, но который заливает 3 дива с картинками полупрозрачным цветом в зависимости от скролла, когда блок с картинками оказывается по центру, они должны быть уже залиты, заливка должна происходить по очереди. То есть прогресс бар должен запуститься только когда блок картинок начал появляться на экране, и на середине экрана должен быть полностью залит.

Answer 1

Чтобы приблизиться к решению своей задачи, начините с изучения Intersection Observer API

Обратите особенное внимание на настройку threshold — она может содержать массив чисел, соответствующих долям видимости целевого элемента на экране, при достижении которых должен сработать callback (необходимое вам действие по визуализации скролла).

Например, в этом случае callback функция будет вызываться при появлении в зоне видимости каждых 25% целевого элемента:

const observer = new IntersectionObserver(function(changes) {
    // делаем что-нибудь 
}, {
    threshold: [0, 0.25, 0.5, 0.75, 1]
});

Более того, вы можете связать непрерывно изменяемый стиль (ширину прогресс-бара, прозрачность и т.д.) c % видимости наблюдаемого элемента через значение IntersectionObserverEntry.intersectionRatio:

function intersectionCallback(entries) {
  entries.forEach(function(entry) {
    entry.target.style.transform = 'scaleX(' + entry.intersectionRatio + ')';
  });
}

Изучите примеры использования и пробуйте.

БЛОГ НА HUSL

Как сделать прогресс бар заливающий по очереди 3 картинки к моменту когда они оказываются в центре экрана

Ответы (1 шт):