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

[Anonymous]

Я разрабатываю веб-страницу с текстом справа и сопроводительным изображением слева. По мере прокрутки пользователем изображение динамически корректируется в зависимости от связанного с ним текста. Хотя макет на рабочем столе работает без проблем, у меня возникают проблемы с адаптивностью.
В адаптивном дизайне изображение отображается над текстом, и это правильно. Однако при прокрутке я вижу слова над изображением. Как это исправить? См. вложение.


Код, с которым я работаю. показано ниже:

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

document.addEventListener("DOMContentLoaded", function() {
const artwork = document.getElementById('artwork');
const sections = document.querySelectorAll('.content-section');

const transformations = [
{ scale: 1, translateX: 0, translateY: 0 },        // Section 1
{ scale: 2.2, translateX: 60, translateY: -30 },   // Section 2
{ scale: 1.9, translateX: -30, translateY: -150 }, //section 3
{ scale: 2, translateX: -130, translateY: -200 }   // Section 4
];

const scrollHandler = () => {
const scrollPosition = window.scrollY + window.innerHeight / 2;

sections.forEach((section, index) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;

if (scrollPosition > sectionTop && scrollPosition < sectionTop + sectionHeight) {
const transform = transformations[index];
artwork.style.transform = `scale(${transform.scale}) translate(${transform.translateX}px, ${transform.translateY}px)`;
}
});
};

window.addEventListener('scroll', scrollHandler);
scrollHandler(); // Initial call to set the correct transform on load
});

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

.imscroll {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.grid-test {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
}

.text-section {
position: relative;
z-index: 1;
}

.interactive-container {
position: sticky;
top: 20px;
height: 180vh;
overflow: hidden;
z-index: 0;
}

.interactive-container img {
position: absolute;
width: 100%;
height: auto;
transition: transform 0.3s ease;
}

.content-section {
padding: 20px 0;
border-bottom: 1px solid #ddd;
}

/* Responsive Design */
@media (max-width: 768px) {
.grid-test {
display: flex;
flex-direction: column;
}

.interactive-container {
height: 40vh;
position: sticky;
}

.interactive-container img {
position: relative;
width: 100%;
height: 40vh;
}
}

@media (max-width: 768px) {
.interactive-container {
z-index: 2; /* Increase z-index */
}
}

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

[img]http://www.reedyrace.com/images/b64d-chassis.jpg[/img]


Section 1 (No Zoom)

Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus.  Duis varius risus congue velit faucibus, sed interdum purus consectetur.

Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.



Zoom to Left Side

Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.

Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.



Zoom to Battery

Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.

Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.



Zoom to Right Bottom

Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed.  Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.

Подробнее здесь: https://stackoverflow.com/questions/785 ... n-i-scroll