ScrollTrigger: ToggleClass ScrollTrigger가 활성 또는 비활성을 전환할 때 요소에 클래스를 추가또는 제거 합니다. String ScrollTrigger가 활성화 되면 trigger에 active 클래스를 추가합니다. toggleClass: "active" Object ScrollTrigger가 활성화 되면 .my-...

ScrollTrigger: fastScrollEnd ScrollTrigger의 fastScrollEnd옵션은 사용자의 스크롤 속도에 따라 ScrollTrigger가 어떻게 반응할지 설정합니다. fastScrollEnd: true 으로 설정하면 트리거 영역을 일정 속도(기본 2500px/s)보다 빨리 벗어나면 ScrollTrigger의 애니메이션을 강...

Prevent Scroll Intro 페이지나 Hero 페이지에서 애니메이션이 진행되는 동안 사용자가 스크롤을 할 수 없게 구현합니다. MarkUp HTML에 보이지 않는 투명한 레이어를 body 최상단에 위치시켜 스크롤을 막아줍니다. <div id="no-scroll"></div> <div id="container"&g...

Parallax Scroll 시차 스크롤링은 스크롤 시 각 요소의 이동 속도를 제어하여 깊이감을 주는 효과를 구현하는데에 쓰입니다. MarkUp 시차 스크롤링이 적용 될 .parallax 엘리먼트에 data-depth 속성을 부여하여 스크롤 시에 받을 속도를 조절합니다. <div id="hero"> <div class="laye...

callback, eventCallback onComplete, onUpdate, onStart, onRepeat 의 이벤트 콜백을 가져오거나 설정한다. eventCallback(type:String, callback:Function, params:Array) Parameters type: String 이벤트 콜백 유형...

Debounce & Throttle 이벤트 오버클럭(overclock - 과도한 이벤트 발생)은 리소스 사용량을 증가시키기 때문에 성능문제를 야기하고 사용자 경험을 떨어트립니다. 과도한 이벤트나 함수들의 빈도수를 줄여서 성능을 향상시키는 프로그래밍 기법 중, 자주 언급되는 두 가지를 알아봅니다. Debounce와 Throttle은 둘 다 함...

SCSS SASS (Synthetically Awesome StyleSheets) SCSS는 Sass로부터 등장했습니다. Sass는 CSS 전처리기로서 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공합니다. 전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행시킬 수 있습니다. SCSS는 Sass3 버전부터 새롭게 등장했습니다. SCSS...

CSS 전처리기란? SASS는 CSS전처리기(Preprocessor)라고도 합니다. CSS 전(예비)처리기 입니다. 보통 언급되는 전치리기 3대장으로 Less, SASS(SCSS), Styleus가 있습니다. 그 중 SASS는 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며, 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌...

backdrop-filter 해당 요소에 블러 처리되는 filter: blur()와 달리 요소의 배경 영역에 블러 처리가 된다. backdrop-filter CSS 속성을 사용 하면 요소 뒤 배경 영역에 흐림이나 색상 변경과 같은 그래픽 효과를 적용할 수 있다. 이는 요소 뒤에 있는 모든 것에 적용되므로 효과를 보려면 요소나 배경이 투명하거나 부분...

ScrollTrigger.scrollerProxy 특정한 스크롤러 요소의 scrollTop 또는 scrollLeft의 getter/setter를 대체하여 부드러운 스크롤링 또는 기타 사용자 정의 효과를 구현할 수 있게 해줍니다. ScrollTrigger.scrollerProxy(scroller: String | Element, vars: Obje...