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'
)}
`;
결과
'Frontend > ReactJS' 카테고리의 다른 글
[React] useCallback vs useMemo (1) | 2023.09.21 |
---|---|
[React] React-calendar (0) | 2023.09.17 |
[React] React 반응형 웹 (0) | 2023.02.23 |
[React] 로그인 Refresh Token 처리 (0) | 2023.02.22 |
[React] ReactPortal 이용하여 modal 창 생성 (0) | 2023.02.19 |