Javascript-форум - Как сделать плавную смену картинок при скроллинге?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как сделать плавную смену картинок при скроллинге? (https://javascript.ru/forum/misc/80303-kak-sdelat-plavnuyu-smenu-kartinok-pri-skrollinge.html)

Как сделать плавную смену картинок при скроллинге?

Есть блоки с картинками.
Как сделать так, чтобы экран оставался на месте, а картинки плавно сменялись при скролле вниз и возвращались в обратной последовательности при скролле вверх?

Важное уточнение: картинки нужно спозиционировать относительно родительского врапера, а не глобального window, чтобы не отображалась сама полоса скролла, т.е. здесь свойство window.pageYOffset мне не подойдет.

У меня не получается это сделать, т.к. не понимаю к какому свойству зацепиться или каким другим путем пойти.

Код:

var section1 = document.getElementById('section1').offsetTop;
var section2 = document.getElementById('section2').offsetTop;
var section3 = document.getElementById('section3').offsetTop;
var section4 = document.getElementById('section4').offsetTop;

var scrollOffset = 300;

window.addEventListener("scroll", function() {

  var scroll = window.pageYOffset + scrollOffset;
  console.log(scroll);

  if (scroll < 500) {
    document.querySelector('.grid-image img').setAttribute('src', 'https://webdevtrick.com/wp-content/uploads/b47sample3.jpg');
  }

  if (scroll > section2) {
    document.querySelector('.grid-image img').setAttribute('src', 'https://webdevtrick.com/wp-content/uploads/image-slider4.jpg');
  }

  if (scroll > section3) {
    document.querySelector('.grid-image img').setAttribute('src', 'https://webdevtrick.com/wp-content/uploads/image-slider3.jpg');
  }

  if (scroll > section4) {
    document.querySelector('.grid-image img').setAttribute('src', 'https://webdevtrick.com/wp-content/uploads/image-slider1.jpg');
  }
});

<section id="section1">
  <div class="img-block">
    <div class="grid-image image-1 active"><img src="https://webdevtrick.com/wp-content/uploads/b47sample3.jpg" /></div>
  </div>
</section>
<section id="section2">
  <div class="img-block">
    <div class="grid-image image-2 active"><img src="https://webdevtrick.com/wp-content/uploads/image-slider4.jpg" /></div>
  </div>
</section>
<section id="section3">
  <div class="img-block">
    <div class="grid-image image-3 active"><img src="https://webdevtrick.com/wp-content/uploads/image-slider3.jpg" /></div>
  </div>
</section>
<section id="section4">
  <div class="img-block">
    <div class="grid-image image-4 active"><img src="https://webdevtrick.com/wp-content/uploads/image-slider1.jpg" /></div>
  </div>
</section>

img {
  width: 400px;
  display: block;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}

@media (min-width: 700px) {
  img {
    width: 500px;
  }
}

@media (min-width: 1000px) {
  img {
    width: 700px;
  }
}

Буду очень признателен за помощь!

Цитата:

Честно говоря не очень понятно. Так в браузере должен быть только один видимый блок в котором плавно меняются картинки при скролле?

Цитата:

Сообщение от AleksSergSB (Сообщение 524654)

Примерно так
Уже решил, спасибо

смена картинок при скроллинге

giwuf,
как вариант ...

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
* {
  margin: 0;
  padding: 0;
}

div {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: tomato;
  overflow: hidden;
}

ul {
  position: relative;
}

li {
  position: absolute;
  width: 40%;
}

img {
  display: block;
  height: 100vh;
  width: 100%;
  object-fit: cover;
  transition: 0.3s;
  opacity: var(--o, 0);
}

section {
  width: 100%;
  height: 500vh;
}
    </style>
  <script>
onscroll = e => {
const imgs = document.querySelectorAll('img');
const n = Math.floor(pageYOffset / innerHeight);
imgs.forEach((img, i) => img.style.setProperty('--o', +(n == i)))
}
</script>

</head>
<body>
<div>
  <ul>
    <li>
      <img id="img0" style="--o: 1" src="https://picsum.photos/500?random=1">
    </li>
    <li>
      <img id="img1" style="--o: 0" src="https://picsum.photos/500?random=2">
    </li>
    <li>
      <img id="img2" style="--o: 0" src="https://picsum.photos/500?random=3">
    </li>
    <li>
      <img id="img3" style="--o: 0" src="https://picsum.photos/500?random=4">
    </li>
    <li>
      <img id="img4" style="--o: 0" src="https://picsum.photos/500?random=5">
    </li>
  </ul>
</div>
<section></section>
</body>
</html>

giwuf,
или так ...

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
* {
  margin: 0;
  padding: 0;
}

div {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: tomato;
  overflow: hidden;
}

ul {
  position: relative;
}

li {
  position: absolute;
  width: 40%;
}

img {
  display: block;
  height: 100vh;
  width: 100%;
  object-fit: cover;
  opacity: var(--o, 0);
}

section {
  width: 100%;
  height: 500vh;
}
    </style>
  <script>
onscroll = e => {
const imgs = document.querySelectorAll('img');
const n = Math.floor(pageYOffset / innerHeight);
const m = (pageYOffset % innerHeight)/innerHeight - .7;

imgs.forEach((img, i) => {
i = (n == i) ? 1 - m : (n + 1 == i) ? m : 0;
i = Math.max(0, Math.min(1, i));
img.style.setProperty('--o', i)
})
}
</script>

</head>
<body>
<div>
  <ul>
    <li>
      <img id="img0" style="--o: 1" src="https://picsum.photos/500?random=1">
    </li>
    <li>
      <img id="img1" style="--o: 0" src="https://picsum.photos/500?random=2">
    </li>
    <li>
      <img id="img2" style="--o: 0" src="https://picsum.photos/500?random=3">
    </li>
    <li>
      <img id="img3" style="--o: 0" src="https://picsum.photos/500?random=4">
    </li>
    <li>
      <img id="img4" style="--o: 0" src="https://picsum.photos/500?random=5">
    </li>
  </ul>
</div>
<section></section>
</body>
</html>