728x90 300x250 SMALL 2025/03/211 스크롤에 따른 반응형 인터랙션 만들기 스크롤 이벤트를 이용하여 사용자가 페이지를 스크롤할 때마다 화면에 변화가 생기는 반은형 애니메이션을 만들ㅇ보자 Section 1 Section 2 Section 3 코드 설명스크롤 시 각 섹션이 화면에 보일 때마다 서서히 나타나는 효과를 구현addEventListener는 이벤트 리스너를 추가하는 메서드로 이 메서드를 사용하면 브라우저가 특정 이벤트(예: 클릭, 스크롤 등)를 감지할 때마다 실행될 함수를 지정할 수 있다. 여기서는 scroll이벤트를 감지해서 페이지를 스크롤할 때마다 해당 함수가 실행되도록 설정getBoundingClientRect()는 요소의 위치와 크기를 반환하는 메서드로 요소의 상대적인 위치와 현재 뷰포트에 대한 크기를 알려준다. 이 메서드를 사용하여 각 섹션의위치를 파악.. 2025. 3. 21. 이전 1 다음 728x90 반응형 LIST