[JavaScript] locomotive-scroll로 marquee 효과 만들기

1. 설치

공식 깃허브에서 받거나 npm으로 설치한다.

GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax.

npm install locomotive-scroll

이후 locomotive-scroll.css와 locomotive-scroll.js를 HTML에 추가한다.

 

 

2. locomotive-scroll 기초 예제

공식 사이트에 있는 가장 쉬운 예제다.

 

See the Pen Untitled by lpla (@lpla) on CodePen.

 

위 CodePen이 제대로 작동하지 않는다면 Full Mode로 봐야 한다.

[locomotive-scroll] basic

 

최상위 부모로 data-scroll-container가 있고 그 안에 data-scroll-section이 있다.

그 외 data-scroll 로 시작하는 속성들은 옵션으로 추정된다.

GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax.

 

 

3. marquee 효과 구현

마키(marquee)는 글자가 한쪽 방향으로 움직이는 HTML 속성이다.

대부분의 브라우저에서 marquee를 지원하지만 웹표준이 아니므로 권장하지 않는다.

일부 사이트에서는 marquee의 사용을 절대 금지하는 곳도 있다.

실제로 사용해봐도 살짝 구식의 느낌이 난다. 2000년대 초반에나 보던 효과랄까...

 

우리는 animation을 사용하여 marquee 효과를 구현할 수 있다.

동일한 텍스트를 수평으로 연결하여 첫번째 텍스트가 지나가고 두번째 텍스트가 애니메이션의 시작 지점에 왔을 때 종료하고 이것을 반복하면 된다.

눈으로 구별하기 위해 서로 다른 배경색을 추가했지만, 배경을 제거하면 마치 하나처럼 자연스럽게 이어진다.

 

See the Pen Untitled by lpla (@lpla) on CodePen.

 

 

4. locomotive-scroll과 marquee 연결

이제 marquee를 locomotive-scroll 안에 넣으면 멋진 스크롤 효과가 탄생한다.

 

See the Pen [locomotive-scroll] marquee by lpla (@lpla) on CodePen.

 

위 CodePen이 제대로 작동하지 않는다면 Full Mode로 보면 된다.

[locomotive-scroll] marquee