반응형 전체 글65 스크롤 시 클래스 추가 및 제거하기 fixed된 헤더가 스크롤을 내렸을 때 클래스 추가 및 제거되는 코드를 구현해봄.scrollHeader() { // 헤더와 섹션을 선택 let header = document.querySelector('.header'); let section = document.querySelector('.section'); // 스크롤 이벤트 리스너 추가 window.addEventListener('scroll', function() { // 섹션의 위치를 확인 let sectionRect = section.getBoundingClientRect(); // 섹션이 뷰포트에 보이면 헤더에 클래스 추가 if (sectionRect.top = 0) { header.classList.a.. 2025. 3. 17. gsap.to()와 ScrollTrigger.create()의 차이 🚀 gsap.to()와 ScrollTrigger.create()의 차이1️⃣ ScrollTrigger.create()단순히 특정 스크롤 위치에서 이벤트(enter, leave, toggle 등)를 트리거하는 역할요소를 직접 애니메이션하는 게 아니라 상태 변화를 감지 ScrollTrigger.create({ trigger: ".box", start: "top 80%", onEnter: () => console.log("Box가 화면에 들어옴!"), onLeave: () => console.log("Box가 화면에서 나감!") });2️⃣ gsap.to() + scrollTrigger 옵션스크롤을 기반으로 애니메이션을 실행gsap.to(".box", { x.. 2025. 3. 6. ScrollTrigger 설명 ScrollTrigger 예시ScrollTrigger_ScrollTrigger.create({ trigger: sloganMotion, start: 'top 30%', end: 'bottom 30%', onToggle: function onToggle(self) { var index = sloganMotion.dataset.index; var keyword = keywordList.querySelector(".__keyword[data-index=\"".concat(index, "\"]")); keyword.classList.toggle('__active', self.isActive); }, onEnter: function onEnter() { keywordList.cla.. 2025. 3. 6. aos 라이브러리 위치 초기값 수정 // 실행 전&[data-aos="fade-up"] { transform: translate3d(0, 50px, 0);}// 실행 후&.aos-animate[data-aos="fade-up"] { transform: translate3d(0, 0, 0);} scss 적용 시 &(앤드)를 써야함 2025. 1. 21. 이전 1 2 3 4 5 ··· 17 다음 반응형
