728x90 300x250 SMALL 인터랙션9 스크롤 특정 위치에 도달 하면 JS 함수 실행하기 [GSAP] 이번에는 스크롤로 특정 영역 도달 시 단순히 애니메이션 효과를주는게 아님 함수를 실행하는 방법을 알아보겠습니다. 스크롤 내려주세요 ↓ 트리거 영역 gsap.registerPlugin(ScrollTrigger) : GSAP은 기본적으로 core 기능만 포함되어 있고 ScrollTrigger 같은 확장 플러그인은 별도로 등록해야 사용 가능하다, 이 명령으논 ScrollTrigger를 GSAP 안에서 사용할 수 있게 등록해주는 명령어이다.trigger : 이 트리거 요소가 기준이 된다. 즉 여기서는 .trigger-zone 요소가 스크롤 지점 감지의 기준점이 된다,start : top 80%는 트리거 요소의 top이 브라우저 화면의 80%지점에 닿을 때 실행하라는 뜻이다.onEnter.. 2025. 6. 15. [GSAP + ScrollTrigger] 스크롤 하면 애니메이션 실행 스크롤 다운 ↓ GSAP 애니메이션 실행! .box요소는 초기 상태에서 opacity:0, translateY(50px)로 설정되어 있음스크롤로 .box가 화면 아래 80% 지점에 도달하면 opacity:1, y:0으로 자연스럽게 애니메이션 한 번만 실행 (toggleActions: "play none none none") GSAP을 사용하면 좋은점다양한 이징 효과(ease: "power3.out", "bounce", "elastic" 등)직관적이고 확장성 높은 애니메이션 구성ScrollTrigger와 결합하면 스크롤 트리거 + 애니메이션을 손쉽게 제어 가능 스크롤 다운 ↓ GSAP 애니메이션 실행! ">스크롤 다운 ↓GSAP 애니메이션 실행! 2025. 5. 29. 스크롤 내리면 애니메이션 실행하기 적용 방법 [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. 버튼에 다양한 인터랙션 효과 적용하기 앞서 배운 hover, transtion, transform, animation을 조합하여 실전 UI 효과를 구현해 봅시다.예제 목록호버 시 색상과 크기가 동시에 바뀌는 버튼클릭 시 눌리는 느낌의 버튼(:active)포커스 시 강조되고 깜빡이는 애니메이션 추가disabled 상태일 때 스타일 변경 버튼 효과 보기 버튼 효과 보기">버튼 효과 보기 2025. 5. 20. 이전 1 2 3 다음 728x90 반응형 LIST