특정 섹션 이동시 한 화면에서 스크롤이 되는것 처럼 보이는 애니메이션

'use client'

import React, { useEffect, useRef, useState } from 'react'
import { styled } from 'styled-components'

const test = ['#e3ecae', '#7beca3', '#ecce7b', '#eec2ee', '#573063', '#f0cfa9']

const Card = () => {
    const [scrollY, setScrollY] = useState(0)
    const [lastScrollY, setLastScrollY] = useState(0)
    const [backColor, setBackColor] = useState('white')

    useEffect(() => {
        const handleScroll = () => {
            const currentScrollY = window.scrollY
            if (currentScrollY > 800) {
                lastScrollY < currentScrollY
                    ? setScrollY((prev) => (prev += 15))
                    : setScrollY((prev) => (prev -= 15))
                setLastScrollY(currentScrollY)
            } else if (currentScrollY < 800) {
                setScrollY(0)
            }
        }

        window.addEventListener('scroll', handleScroll)
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    }, [lastScrollY, window])

    useEffect(() => {
        if (scrollY > 40 && scrollY <= 220) {
            setBackColor(test[0])
        } else if (scrollY > 220 && scrollY < 525) {
            setBackColor(test[1])
        } else if (scrollY > 525 && scrollY < 720) {
            setBackColor(test[2])
        } else if (scrollY > 720 && scrollY < 960) {
            setBackColor(test[3])
        } else if (scrollY > 960 && scrollY < 1125) {
            setBackColor(test[4])
        } else if (scrollY > 1125 && scrollY < 1458) {
            setBackColor(test[5])
        } else {
            setBackColor('white')
        }
    }, [scrollY, backColor])

    return (
        <>
            <div style={{ height: 800, width: '100%', backgroundColor: 'gray' }} />
            <Background color={backColor}>
                <div>contents</div>
                <Wrapper scroll={scrollY}>
                    {test.map((item, i) => (
                        <li key={i} style={{ width: 340, height: 480 }}>
                            <Item color={item} style={i % 2 !== 0 ? { marginTop: 300 } : {}}></Item>
                        </li>
                    ))}
                </Wrapper>
            </Background>
            <div style={{ height: 1000, width: '100%', backgroundColor: 'gray' }} />
        </>
    )
}

export default Card
const Background = styled.div<{ color: string }>`
    display: flex;
    justify-content: space-around;
    gap: 40px;
    background-color: ${({ color }) => color};
    width: 100%;
    max-height: 900px;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
`
const Wrapper = styled.ul<{ scroll: number }>`
    padding: 200px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 120px 40px;
    width: 100vh;
    height: 100%;
    list-style: none;
    translate: none;
    rotate: none;
    scale: none;
    transition: all 0.6s ease;
    transform: ${({ scroll }) => `translate3d(0, -${scroll}px, 0)`};
`
const Item = styled.div<{ color: string }>`
    border-radius: 10px;
    height: 100%;
    width: 100%;
    background-color: ${({ color }) => color};
    text-align: center;
    border: 1px solid lightgray;
`

참고 인터렉션 신한은행PG
카드가 하나씩 활성화 되고 해당 카드의 색상을 백그라운드로 보여줌