Как сделать, чтобы изображения отображались при прокрутке правильно? ⇐ CSS

[Гость]

Я пытаюсь сделать так, чтобы при прокрутке в разделе «переднее изображение» появлялись два изображения. Когда пользователь прокручивает вниз, изображения должны вести себя следующим образом:

• top-image: должно опускаться
• bottom -image: должно подниматься вверх

когда пользователь прокручивает вверх, поведение должно быть обратным.
Что я' До сих пор я пробовал использовать js для отслеживания прокрутки:

Код: Выделить всё

  const frontImageSection = document.querySelector('.front-image');
const topImage = document.querySelector('.top-image');
const bottomImage = document.querySelector('.bottom-image');

window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
const windowHeight = window.innerHeight;
const frontImageSectionTop = frontImageSection.offsetTop;
const frontImageSectionHeight = frontImageSection.offsetHeight;

const topImageOffset = (scrollPosition / frontImageSectionHeight) * 100;

let bottomImageOffset = -((scrollPosition / frontImageSectionHeight) * 100);

topImage.style.transform = `translateY(${topImageOffset}%)`;
bottomImage.style.transform = `translateY(${bottomImageOffset}%)`;
});

Код: Выделить всё

  body {
height: 300vh;
}

.front-image {
top: 20%;
position: relative;
padding-top: 96.2px;
overflow: hidden;
}

.front-image .top-image,
.front-image .bottom-image {
position: fixed;
transition: transform 0.3s ease-in-out;
width: 200px;
}

.front-image .top-image {
top: 0;
right: 10%;
}

.front-image .bottom-image {
bottom: 0;
left: 10%;
}

.front-image .content picture img {
width: 100%;
height: 525px;
object-fit: cover;
}

Код: Выделить всё

[img]https://i.imgur.com/bTX82bl.jpeg[/img]





[img]https://i.ibb.co/Vvy6Cfp/Pngtree-isolated-cat-on-white-background-9158356.png[/img]
      class="top-image">
[img]https://i.ibb.co/Vvy6Cfp/Pngtree-isolated-cat-on-white-background-9158356.png[/img]
      class="bottom-image">

but the behavior is quite bizarre and doesn't even seem smooth, also, the images should appear within the section, but for some reason they pop out I can't figure out where I'm going wrong, could anyone help me?
Thanks in advance


Источник: https://stackoverflow.com/questions/781 ... g-properly