-
스크롤트리거 예제 + 부드러운 스크롤 (ScrollTrigger Smooth Scroll (locomotive-scroll) )
2023. 8. 8.
스크롤트리거 예제 + 부드러운 스크롤 (ScrollTrigger Smooth Scroll (locomotive-scroll) ) 입니다.
스크롤트리거는 정말 자주 쓰이는데 그때 부드러운 스크롤 효과와 함께 사용할 경우 locomotive-scroll.js 와 함께 사용하면 편합니다.
하단에 스크롤트리거를 이용한 애니메이션 예제와 부드러운 스크롤 효과를 함께준 코드가 있습니다. :)
※ 하단의 코드펜 아이프레임에서 스크롤할때 블로그 페이지 스크롤과 함께 작동하는 오류가 있습니다.
예제를 정확히 확인하시려면 코드펜 로고를 눌러 새창으로 열고 확인해주시면 됩니다.
See the Pen GSAP 스크롤트리거 부드러운 스크롤 (ScrollTrigger Smooth locoScroll) by kimyangsun (@kimyangsun) on CodePen.
자바스크립트 코드
"use strict"; gsap.registerPlugin(ScrollTrigger); window.addEventListener('DOMContentLoaded', function() { onInitScrollTrigger(); }); function onInitScrollTrigger(){ // 스크롤 기준 설정 ScrollTrigger.defaults({ scroller: '.wrap', }); // LocomotiveScroll 적용 const locoScroll = new LocomotiveScroll({ el: document.querySelector(".wrap"), smooth: true, smoothMobile: true }); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(".wrap", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: document.querySelector(".wrap").style.transform ? "transform" : "fixed" }); /* Sections 트리거 */ let sections = gsap.utils.toArray('.section'); sections.forEach((section, i) => { gsap.timeline({ scrollTrigger: { trigger: section, start: 'top bottom', end: 'top 20%', scrub: 0.5, markers: true, } }) .fromTo(section, {scale: 0.8, opacity: 0}, {scale: 1, opacity: 1}, 0) }) sections.forEach((section, i) => { gsap.timeline({ scrollTrigger: { trigger: section, start: 'bottom 80%', end: 'bottom top', scrub: 0.5, markers: true, } }) .fromTo(section, {scale: 1, opacity: 1}, {scale: 0.8, opacity: 0}, 0) }) ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); // 리사이즈 window.addEventListener('resize', function() { ScrollTrigger.refresh(); }); }
'코딩 기록 > 코딩 소스 [HTML & CSS & JS]' 카테고리의 다른 글
자바스크립트 전광판 기능 - Marquee 효과 커스텀 (Vanilla JS Marquee) (0) 2023.08.08 바닐라 자바스크립트 D-day 계산 (Vanilla JS D-day) (0) 2023.08.08 (자바스크립트) input type text 휴대전화 번호 양식, 날짜 양식에 맞게 입력되는 텍스트 입력창 기능 (0) 2023.08.07 바닐라 자바스크립트 header gnb 탑메뉴 예제 3개 (PC & 모바일) (0) 2023.05.02 자바스크립트 Input type File 파일명, 확장자만 나오게 커스텀 (0) 2023.03.29 댓글