Dolly는 HTML 요소에 data-dolly 속성을 붙여 스크롤 애니메이션을 적용하는 CSS 도구다. 별도 자바스크립트나 초기화 함수 없이 사용할 수 있으며, Firefox에서는 애니메이션 없이 페이지가 표시된다.
스타일시트를 연결하고 원하는 요소에 data-dolly="tilt-up"처럼 속성을 추가하면 된다. 고정 구간을 만들려면 data-dolly-scene과 data-dolly-pin으로 감싸고, 애니메이션을 구간 스크롤에 맞추려면 data-dolly-on="scene"을 지정한다.
<link rel="stylesheet" href="dolly.css"> <h1 data-dolly="tilt-up">Arrives as you reach it</h1> <img data-dolly="rack" src="still.jpg" alt=""> <!-- a pinned scene, like the sections above --> <div data-dolly-scene> <div data-dolly-pin> <img data-dolly="zoom" data-dolly-on="scene" src="shot.jpg" alt=""> </div> </div> /* one caveat: a parent with overflow:hidden becomes its own scroll container and pins the move at its end state. Use overflow:clip. */
설치 방법은 npm 패키지 @dollyjs/core를 사용하거나, 빌드 과정 없이 CSS 파일을 직접 연결하는 방식이다. 부모 요소에 overflow:hidden을 설정하면 별도의 스크롤 컨테이너가 생겨 애니메이션이 끝 상태에 고정될 수 있으므로 overflow:clip을 사용하라고 안내한다.
Dolly는 CSS 스크롤 타임라인을 지원하는 Chrome·Edge 115 이상, Safari 26 이상, Opera에서 애니메이션을 재생한다. 사이트 설명에 따르면 이는 방문자의 약 87%에 해당한다. 아직 이를 지원하지 않는 Firefox에서는 별도 폴리필 없이 애니메이션이 빠진 페이지를 보여준다. 콘텐츠는 애니메이션이 실행되지 않아도 표시되며, prefers-reduced-motion 설정이 켜진 경우 애니메이션을 중단하고 고정 구간도 일반 콘텐츠처럼 스크롤한다.
도구에는 페이드, 기울이기, 확대·축소, 패럴랙스, 마스크 등 34가지 움직임이 포함된다. 제작자는 스크롤을 감지하는 자바스크립트 대신 브라우저가 애니메이션을 처리하며, 자바스크립트 용량은 0kB라고 설명한다. 모든 동작은 움직임 안내 페이지에서 확인할 수 있다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요