[React] Styled-components에서 스크롤 애니메이션 구현

 

Introduction

스크롤 y 값을 통해서 특정 스크롤 위치가 되었을 때 애니메이션을 실행하는 코드를 구현해보려고 한다.

 

1. React에서 스크롤 이벤트 적용하기

function App() {
   const [scr, setScr] = useState(0) // 스크롤 높이를 나타내는 변수
    
    // addEventListener 를 이용하여 스크롤 이벤트가 발생할 때마다 scr를 갱신
   useEffect(() => {
        window.addEventListener('scroll', (e) => {
            setScr(window.scrollY);
        });
        return () => {
            window.removeEventListener('scroll', (e) => {
                console.log(e.target);
            })
        }
    }, []);
 
    return(
    	<>
        	<div sc={scr > 300}>300</div>
           	<div sc={scr > 700}>700</div>
           	<div sc={scr > 1100}>1100</div>
           	<div sc={scr > 1500}>1500</div>
        </>
    );
 }

 

2. styled-components에 keyframes 적용

import styled, { css, keyframes } from "styled-components";

export const moveTable = keyframes`
    0%{margin-top: 400px;}
    100%{margin-top: 0;}
`;

export const ContentTd = styled.td`
    animation: ${(props) => (
        props.sc ? css`${moveTable} 1s` : 'none'
    )}
    
`;

 

결과

특정 스크롤 위치에 도달 할 시 애니메이션 적용