Rellax.js - 바닐라 자바 ​​스크립트를 사용하여 무료 시차 기능

시차 스크롤링 바로 끝나면 믿을 수 없을 것 같습니다. 모든 웹 사이트에서 원하는 기능은 아니지만 광고 소재 사이트 및 방문 페이지, 시차 요소 주의를 빨리 기울이십시오..

무료로 사용할 수있는 수많은 자바 스크립트 라이브러리가 있습니다. 애니메이션 스크롤 효과 그러나 많은 사람들이 부풀어 오르거나 너무 복잡합니다..

그것이 내가 추천하는 이유이다. Rellax.js 시차가 필요합니다. 바닐라 자바 ​​스크립트를 기반으로하는 무료 오픈 소스 플러그인이므로 의존성이 없다..

기본적으로 간단한 함수 호출 만 필요합니다. 페이지 요소에 시차 클래스를 지정합니다. 그런 다음 스크롤 할 때 이러한 요소 고정되어있다. 사용자의 시점과 함께 이동.

이러한 요소를 사용자 정의하여 페이지 요소 가까이 또는 멀리 보이도록 표시 할 수 있습니다. 이렇게하면 깊이있는 환상 페이지의 모든 간단한 자바 스크립트 라이브러리를 통해 작동합니다..

Rellax 소스 코드는 GitHub에서 무료로 다운로드 할 수 있습니다..

전체 설정 단일 JS 함수를 사용합니다. 목표 .rellax 수업 좋아요 :

 var rellax = new Rellax ( '. rellax'); 

꽤 많이 사용할 수 있습니다. 원하는 모든 수업, 예제 데모에서는 .rellax 단순함을 위해서.

여기에서, 너는 방금 시차 요소를 감싸다. div 안에 .rellax 클래스와 속도 속성을 설정하십시오.. 이것은 데이터 - 관련 속도 -10에서 +10 사이의 값을 허용하는 사용자 지정 특성.

여기에 예제 스 니펫 데모 페이지의 HTML에서

 
 나는 천천히 그리고 부드럽다. 
 

당신은 또한 수 중심 요소 페이지 및 요소 위치 맞춤 설정 CSS를 통해.

Rellax는 페이지 구성 방법이나 페이지에서 CSS 요소를 정의하는 방법을 알려주지 않습니다. 그것이하는 일은 모두 자연 시차 스크롤 효과 만들기 순수한 JavaScript로. 이걸 어떻게 사용하는지는 전적으로 당신에게 달려 있습니다..

보고 싶으면 라이브 데모, 메인 사이트를 들여다 보거나 GitHub 레포를 탐색하십시오. 여기에는 Rellax.js를 사용하는 라이브 웹 사이트에 대한 링크와 함께 일부 문서가 포함됩니다..

그리고 무엇보다도 팀은 지속적으로 끌어 오기 요청을 기꺼이 받아들이므로 문제가 있거나 문제에 대한 제안이 있으면 팀에 빠른 메시지를 보내면됩니다..