728x90 300x250 SMALL 전체 글1163 웹사이트에 스크롤 애니메이션 추가하는 가장 쉬운 방법 GSAP는 강력한 웹 애니메이션 라이브러리로, ScrollTrigger는 gsap의 플러그인중 하나이다.ScrollTrigger를 사용하면 사용자의 스크롤 위치에 따라 애니메이션을 실행하거나 컨트롤할 수 있다.특히, 웹사이트에서 스크롤을 기반으로 동적인 인터랙션을 만들 때 유용하다. ScrollTrigger의 주요 기능스크롤 위치를 감지하여 애니메이션 실행 : 특정 요소가 화면에 나타날 때 애니메이션을 시작할 수 있다.스크롤 진행률에 따라 애니메이션 속도 조절(scrub 기능) : 사용자의 스크롤 속도에 따라 애니메이션을 부드럽게 조절할 수 있다.요소가 뷰포트에 들어올 때 트리거 : 특정 위치에서 애니메이션을 실행하도록 설정할 수 있다.고정(fixed) 애니메이션 지원(pin 기능) : 특정 요소를 스.. 2025. 3. 25. gsap parallax 스크롤 효과 - 비 보호되어 있는 글 입니다. 2025. 3. 24. 까딱거리는 아이콘 css 애니메이션 @keyframes tilt { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); }}.icon { width: 100px; height: 100px; display: block; margin: 50px auto; animation: tilt 1s ease-in-out infinite;} 아이콘이 좌우로 자연스럽게 흔들린다.(transform:rotate(-10deg) -> rotate(10deg)애니메이션은 infinite로 반복된다.ease-in-out을 적용해 부드러운 움직임을 준다. "> 2025. 3. 23. 터치스크린 인터페이스에서의 인터랙션 최적화 모바일 환경에서 터치스크린 인터페이스를 활용하여, 터치 이벤트에 반응하는 UI를 최적화하는 방법을 알아보자 이를 통해 사용자가 스와이프나 탭 등의 제스처로 직관적으로 조작할 수 있는 UI를 만들 수 있다. Item 1 Item 2 Item 3 코드 설명위 코드는 스와이프 제스처를 사용하여, 터치스크린 환경에서 수평 슬라이드 효과를 구현한 예제로 모바일 기기에서 사용자가 스와이프를 할 때 슬라이드 형태로 이동하는 캐러셀을 만드는 방법을 설명한다.touchstart, touchmove, touchend 이벤트를 사용하여 터치 이벤트를 감지하고, 스와이프에 따라 carousel을 이동시킨다.touchstart : 사용자가 화면을 터치했을 때 발생하는이벤트이다. 이 때 e.touche.. 2025. 3. 22. 이전 1 2 3 4 5 ··· 291 다음 728x90 반응형 LIST