Roll.js로 스크롤 효과 만들기

웹 전체에서 수십 개의 스크롤 라이브러리를 찾을 수 있습니다. 대부분은 JavaScript로 작성되고 단일 페이지 레이아웃, 스크롤 애니메이션 등을 위해 스타일을 변경할 수있는 자체 효과가 있습니다..

하지만 어때? 나만의 스크롤 효과 코딩하기? 또는 사용자가 스크롤 한 페이지까지의 거리를 추적하는 간단한 방법을 원한다면?

Roll.js는 찾고있는 라이브러리입니다. 이 오픈 소스 스크립트는 미친 작고 사용하기 쉬운 슈퍼. 자바 스크립트 몇 줄로이 작업을 할 수 있습니다. 무엇보다 중요한 것은 특정 작업을 수행하도록 강요하지 않습니다. 너에게 도구를 준다. 나만의 맞춤 스크롤 기능 만들기.

이 라이브러리의 목표는 개발자가 많은 노력을 기울이지 않고도 스크롤 효과를 구조화 할 수 있도록 돕는 것입니다..

기본 GitHub 저장소를 살펴보면 몇 가지 예제 발췌 문장으로 전체 설정 안내서를 찾을 수 있습니다. 너는 할 수있다. 사용자가 스크롤하는 거리를 호출하는 함수를 실행합니다., 또는 다른 “창유리” 페이지에.

단일 페이지 레이아웃에서 가장 잘 작동하지만 Roll.js를 너무 많이 사용할 수 있습니다..

단일 함수 호출로 다음을 포함하는 각 스크롤로 데이터를 가져올 수 있습니다.

• 총 페이지 단계 (해당되는 경우).
• 페이지 아래로 스크롤 된 총 %.
• 페이지의 현재 위치 (픽셀 단위).
• 장치 크기에 따른 총 뷰포트 높이.

이것은 또한 사용자를 페이지의 특정 부분으로 이동시키는 점프 링크와 함께 작동합니다..

그러나 다른 라이브러리에서도 이러한 기능을 많이 사용할 수 있습니다. Roll.js가 그렇게 특별한 이유?

그 중 일부는 문법이지만, 여기서 큰 판매자는 총 라이브러리 크기입니다. 8KB 축소 될 때. 그런 세부적인 스크롤 라이브러리는 꽤 작습니다.!

이 기능이 기본 데모 페이지에서 어떻게 작동하는지 볼 수 있으며 Roll.js 소스 코드를 다운로드하여 직접 데모를 다운로드하십시오..

라이브 데모 및 원시 라이브러리 파일의 모든 것을 GitHub에서 가져올 수 있으며 작업하기가 쉽습니다..

그러나 궁금한 점이나 제안 사항이 있거나 멋진 라이브러리에 대한 감사를 전하고 싶다면 작성자 @williamngan에게 메시지를 보낼 수 있습니다..