[parallax.js] 패럴렉스 스크롤링(parallax scroll) 사용법/옵션, 예제 파일

parallax.js 플러그인입니다.

패럴랙스 스크롤링 효과는 스크롤의 움직임에 따라 콘텐츠가 반응하여 시간차 움직임을 보이는 효과입니다.

아래 사이트에서 다운받거나 옵션을 확인해보세요 :)

pixelcog.github.io/parallax.js/

 

[사용방법]

01. 설치

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/parallax.js"></script>

jquery와 함께 parallax.js를 추가해주세요.

 

02. html 마크업

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>

해당 영역에 class="parallax-window"  , data-parallax="scroll"  data-image-src="이미지 경로"를 추가해줍니다.

 

자바스크립트로 호출할 경우에는 아래항목을 추가해주시면 됩니다.

$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});

03. css 추가

.parallax-window {
    min-height: 400px;
    background: transparent;
}

해당 영역에 height값을 지정해줍니다. 

parallax.js는 고정된 크기가 없으면 작동이 안 된다고 합니다 :)

 

 

아래 항목은 parallax.js의 옵션입니다.

 

이름	유형	기본	기술
imageSrc	통로	없는	시차 효과에 적용하려는 이미지의 경로를 제공해야합니다.
naturalWidth	번호	자동	이미지의 올바른 가로 세로 비율을 결정할 때로드 속도를 높이고 오류를 줄이기 위해 이미지의 자연스러운 너비와 높이를 제공 할 수 있습니다.
naturalHeight	번호	자동
위치	xPos yPos	센터 센터	이것은 background-position css 속성과 유사합니다. 좌표를 위쪽, 아래쪽, 오른쪽, 왼쪽, 가운데 또는 픽셀 값 (예 : -10px 0px)으로 지정합니다. 시차 이미지는 대상 요소를 덮으면서 가능한 한 이러한 값에 가깝게 배치됩니다.
positionX	xPos	센터
positionY	yPos	센터
속도	흙손	0.2	시차 효과가 실행되는 속도입니다. 0.0은 이미지가 제자리에 고정되어 있음을 의미하고 1.0은 이미지가 페이지 콘텐츠와 동일한 속도로 흐릅니다.
zIndex	번호	-100	고정 위치 요소의 Z- 색인 값입니다. 기본적으로 이들은 페이지의 다른 모든 것 뒤에 있습니다.
출혈	번호	0	선택적으로 시차 미러 요소를 설정하여 미러링 된 요소 위와 아래로 몇 픽셀을 확장 할 수 있습니다. 특정 브라우저에서 느리거나 끊기는 스크롤 이벤트를 숨길 수 있습니다.
iosFix	부울	진실	iOS 장치는이 플러그인과 호환되지 않습니다. true 인 경우이 옵션은 iOS 사용자 에이전트를 감지 할 때마다 시차 이미지를 정적 인 중앙 배경 이미지로 설정합니다. 자신의 정상적인 성능 저하를 구현하려면이 기능을 비활성화하십시오.
androidFix	부울	진실	true 인 경우이 옵션은 Android 사용자 에이전트를 감지 할 때마다 시차 이미지를 정적 인 중앙 배경 이미지로 설정합니다. Android 장치에서 시차 스크롤 효과를 활성화하려면이 기능을 비활성화하십시오.

패럴렉스.zip

0.77MB