일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 게시판
- #image
- 해피CGI
- #동영상
- #쇼핑몰
- happycgi
- #CSS
- 쇼핑몰
- #이미지
- #솔루션
- #홈페이지
- #jQuery
- php
- #cgimall
- #해피CGI
- 사이트제작
- 솔루션
- 홈페이지
- javascript
- #웹솔루션
- #happycgi
- 홈페이지제작
- CSS
- jquery
- 해피씨지아이
- 웹솔루션
- #업종별
- CGIMALL
- #뉴스
- #홈페이지제작
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] jquery.parallax.js ver2.0.0-alpha 본문
* jquery.parallax.js
- css3의 트랜스폼을 이용한 parallax 스크롤 형태의 원페이지 디자인페이지 입니다.
간단한 원페이지 형태의 회사소개 페이지나. 포트폴리오 용, 또는 이벤트형으로 사용하시면 좋은소스입니다.
라이센스는 MIT라이센스이며 파일안에서도 확인하실 수 있습니다.
마크업 및 사용방법은 위 데모사이트주소로 들어가시면 확인하실수 있으며 다운도 받으실 수 있습니다.
* 이용방법
- 첨부된 압출파일을 압축해제하고 사용하려는 웹디렉터리에 업로드를 합니다
문서 상단에 샘플 css 파일과 jquery 파일호출 및 스크롤시 이미지가 보여줘야될
영역에 대한 높이값을 조정 하는 스크립트를 삽입합니다
그리고 스크롤 하면서 보여줘야될 문구와 이미지 설정은 아래와 같이
class 로 선언하여 해당 영역안에
파트별로 내용들을 삽입 할 수 있도록 되어있으며 데이터 속성을 통해 요소뒤에 효과를 추가할 수도 있습니다
ex)
data-parallax data-mirror-selector=".mirrorContainer" data-scrolling-selector=".scrollingElement"="scroll"
data-src="/path/to/image.jpg"
데이터 속성을 통해 옵션을 전달할 수 있습니다.
데이터 속성의 경우에 data-와 같이 옵션 이름을에 추가하시면 됩니다(data-src="".)
제공되는 옵션은 아래와 같습니다
Name | type | default | description |
---|---|---|---|
imageSrc | path | null | 시차 효과에 적용 할 이미지의 경로를 제공해야합니다. |
naturalWidth | number | auto | 이미지의 자연스러운 너비와 자연스러운 높이를 제공하여로드 속도를 높이고 이미지의 정확한 종횡비를 결정할 때 오류를 줄일 수 있습니다. |
naturalHeight | number | auto | |
position | xPos yPos | center center |
배경 위치 CSS 속성과 유사합니다. 좌표를 위, 아래, 오른쪽, 왼쪽, 가운데 또는 픽셀 값 (예 : -10px 0px)으로 지정하십시오. 시차 이미지는 대상 요소를 계속 덮고 가능한 한이 값에 가깝게 위치합니다. |
positionX | xPos | center | |
positionY | yPos | center | |
speed | float | 0.2 | 시차 효과가 실행되는 속도입니다. 0.0은 이미지가 고정 된 위치에 고정 된 것처럼 보입니다. 1.0은 이미지가 페이지 내용과 동일한 속도로 흐르게됩니다. |
zIndex | number | -100 | 고정 위치 요소의 z- 인덱스 값입니다. 기본적으로 이들은 페이지의 다른 모든 것 뒤에 있습니다. |
출혈 | number | 0 | 선택적으로 시차 거울 요소를 미러 요소의 위아래로 몇 픽셀 연장하도록 설정할 수 있습니다. 이렇게하면 특정 브라우저에서 느리거나 이상한 스크롤 이벤트를 숨길 수 있습니다. |
iosFix | boolean | true | iOS 기기는이 플러그인과 호환되지 않습니다. true이면이 옵션은 iOS 사용자 에이전트를 감지 할 때마다 시차 이미지를 정적 중심 맞춤 배경 이미지로 설정합니다. 자신 만의 우아한 성능 저하를 구현하려면이 기능을 해제하십시오. |
androidFix | boolean | true | true이면이 옵션은 Android 사용자 에이전트를 감지 할 때마다 시차 이미지를 정적 중심 맞춤 배경 이미지로 설정합니다. Android 기기에서 시차 스크롤 효과를 사용하려면이 기능을 사용 중지합니다. |
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
[해피CGI][cgimall] Animated Event Calendar In jQuery - Simple Calendar (0) | 2019.05.10 |
---|---|
[해피CGI][cgimall] jQuery Gridly (0) | 2019.05.02 |
[해피CGI][cgimall] jquery ui Spinner (0) | 2019.04.29 |
[해피CGI][cgimall] jQuery Modal(모달창) (0) | 2019.04.26 |
[해피CGI][cgimall] CKEditor5 V12.0.0 (0) | 2019.04.25 |