728x90 300x250 SMALL 2025/05/251 스크롤 내리면 애니메이션 실행하기 적용 방법 [html + JavaScript] 웹사이트에서 스크롤을 내릴 때 요소가 자연스럽게 등장하는 효과 이 기능은 단순한 css와 javaScript만으로도 쉽게 구현할 수 있습니다. IntersectionObserver API를 활용하여 스크롤 애니메이션 효과를 만들어보겠습니다. 구현 목표스크롤을 아래로 내리면 특정 박스가 페이드 인(Fade In) + 위로 올라오는 애니메이션을 실행애니메이션은 한 번만 실행전체코드 스크롤 다운 ↓ 애니메이션 실행! 코드 설명 css설명.box { opacity: 0; transform: translateY(50px); transition: all 0.6s ease;}.box.active { opacity: 1; transform: translateY(0);}box는 처음에는 opacit.. 2025. 5. 25. 이전 1 다음 728x90 반응형 LIST