728x90 300x250 SMALL 웹디자인7 스크롤에 따른 반응형 인터랙션 만들기 스크롤 이벤트를 이용하여 사용자가 페이지를 스크롤할 때마다 화면에 변화가 생기는 반은형 애니메이션을 만들ㅇ보자 Section 1 Section 2 Section 3 코드 설명스크롤 시 각 섹션이 화면에 보일 때마다 서서히 나타나는 효과를 구현addEventListener는 이벤트 리스너를 추가하는 메서드로 이 메서드를 사용하면 브라우저가 특정 이벤트(예: 클릭, 스크롤 등)를 감지할 때마다 실행될 함수를 지정할 수 있다. 여기서는 scroll이벤트를 감지해서 페이지를 스크롤할 때마다 해당 함수가 실행되도록 설정getBoundingClientRect()는 요소의 위치와 크기를 반환하는 메서드로 요소의 상대적인 위치와 현재 뷰포트에 대한 크기를 알려준다. 이 메서드를 사용하여 각 섹션의위치를 파악.. 2025. 3. 21. hover효과를 이용한 인터렉티브 UI 만들기 호버 효과를 사용하여 마우스를 올리면 시각적으로 변하는 인터렉티브한 UI를 만들어 보자. .card요소에 :hover상태를 추가하여, 마우스를 올렸을 때 카드 크기가 커지고 그림자가 진해지는 효과를 구현한다.transition 속성을 사용하여 애니메이션 효과를 부드럽게 적용하고 있다. "> 2025. 3. 19. Lottie(로띠) 활용법, JSON 애니메이션을 웹에 추가하는 법 Lottie(로띠)란?Lottie는 Airbnb에서 개발한 Json 기반 애니메이션 파일 형식으로, 웹과 모바일에서 가볍고 부드러운 애니메이션을 실행할 수 있도록 해주는 라이브러리다.Lottie는 After Effects에서 만든 애니메이션을 JSON파일로 변환한 후, lottie-web 또는 lottie-react등의 라이브러리를 통해 쉽게 불러와 사용할 수 있다. Lottie의 특징가볍고 빠름 - JSON형식이기 때문에 GIF보다 파일 크기가 작고, 부드러운 애니메이션을 제공플랫폼 호환성 - 웹뿐만 아니라 Android, ios에서도 동일하게 사용 가능코드로 제어 가능 - 애니메이션을 재생, 멈춤, 속도 조절, 특정 프레임 이동 가능반응형 지원 - 벡터 기반 애니메이션이므로 해상도에 영향을 받지 않음.. 2025. 3. 12. 이전 1 2 다음 728x90 반응형 LIST