Эффект горизонтального стека при вертикальной прокрутке с помощью CSS, JS ⇐ CSS

[Anonymous]

Я пытался добиться этого эффекта, но мне это не удалось.
Эффект: https://imgur.com/a/dBvwa3e
Может ли кто-нибудь помочь меня выйти? Это максимум, чего мне удалось достичь:
Проверенный подход:
Я пытался прикрепить каждое изменение изображения к позиции прокрутки внутри родительский контейнер, но если сделать это с помощью реакции, это означает, что анимация или переходы не применяются. Или я просто не знаю, как это правильно сделать.


< pre class="snippet-code-js lang-js Prettyprint-override">

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

function Section() {
const colors = [

[img]{img1} alt=[/img]
,

[img]{img2} alt=[/img]
,

[img]{img3} alt=[/img]
,

[img]{img4} alt=[/img]
,
];
const headings = [
"X",
"Y",
"Z",
"W",
];

const contents = [
"X",
"Y",
"Z",
"W",
];
const [scrolling, setScrolling] = useState(colors[0]);
const [heading, setHeading] = useState(headings[0]);
const [content, setContent] = useState(contents[0]);
const containerRef = useRef(null);

const handleScroll = () => {
if (!containerRef.current) return;

const scrollTop = containerRef.current.getBoundingClientRect().top;
console.log(scrollTop);
if (scrollTop >= -500 && scrollTop < 0) {
setScrolling(colors[0]);
setHeading(headings[0]);
setContent(contents[0]);
} else if (scrollTop >= -1000 && scrollTop < -500) {
setScrolling(colors[1]);
setHeading(headings[1]);
setContent(contents[1]);
} else if (scrollTop >= -1500 && scrollTop < -1000) {
setScrolling(colors[2]);
setHeading(headings[2]);
setContent(contents[2]);
} else if (scrollTop >= -2000 && scrollTop < -1500) {
setScrolling(colors[3]);
setHeading(headings[3]);
setContent(contents[3]);
}
};

useEffect(() => {
const parentElement = containerRef.current;

parentElement.addEventListener("scroll", handleScroll);

return () => {
parentElement.removeEventListener("scroll", handleScroll);
};
}, []);

useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);

return (



{scrolling}
{window.innerWidth > 1100 && (


[img]{bg} alt=[/img]

[img]{bg} alt=[/img]


)}




{heading}
{content}

Let's Start





);
}

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

.cardContainer {
display: flex;
justify-content: space-around;
position: relative;
margin-top: 10vh;
height: 2300px;
width: 90vw;
overflow: visible;
}

.wrapper {
display: flex;
gap: 3rem;
justify-content: space-between;
align-items: center;
position: sticky;
top: 10vh;

height: 70vh;
width: 100%;
}
.cardParent {
height: 100%;
width: 90%;
}

.card {
height: 100%;
width: 100%;
z-index: 999;

}

.card > img {
margin-right: auto;
width: fit-content;
height: 100% ;
object-fit: contain;
}

.dummy1{
height: 100%;
width: fit-content;
position: absolute;
top: 0;
z-index: -9;
display: flex;
}

.dummy1 >  img{
height: 90%;
width: 100%;
translate: 15% 5% 0;
object-fit: contain;
border-radius: 3rem !important;
border-right: 1px solid rgb(149,149,149);
}

.dummy2 {
height: 100%;
width: fit-content;
position: absolute;
top: 0;
z-index: -90;
display: flex;
}
.dummy2 > img{
height: 80%;
width: 100%;
translate: 33% 12% 0;
object-fit: contain;
border-radius: 2rem !important;
border-right: 1px solid rgb(149,149,149);
}

.sideHeadings {
display: flex;
align-items: center;
height: 100%;
width: 100%;
}

.sideHeadingsContent{
display: flex;
flex-direction: column;
justify-content: space-between;

height:60%;
width:100%;
}

.sideHeadingsContent > h3 {
font-size: var(--h2-large);
font-family: var(--font-inter);
font-weight: 400;
color: rgb(201,201,201);
}

.sideHeadingsContent >p{
font-family: var(--font-poppins);
color: rgb(149,149,149);
font-size: var(--para-large);
}

.sideHeadingsContent > a{
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 500;
background: linear-gradient(90deg,rgba(221,255,0,.5)60%,rgb(221,255,0) 100%);
/* transition: all .6s ease !important; */
}
.sideHeadingsContent > a:hover{
background: black !important;
}

/* Tablet */

@media  (width h3{
font-size: var(--h3-large);
}

.wrapper img{
width: 90vw;
height: 40vh;
}

.sideHeadingsContent > a{
margin: 0;
font-size: 16px;
}
}

@media (width h1{
font-size: var(--h1-heading-mobile);
}

.sideHeadingsContent > h3{
font-size: var(--h3-heading-mobile);
}

.wrapper img{
width: 90vw;
height: 40vh;
}
}

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

Я просто не могу понять эту анимацию, переход или что-то еще является. Дизайн находится на https://proximab.framer.website/

Подробнее здесь: https://stackoverflow.com/questions/793 ... ith-css-js