티스토리 뷰
오랜만에 개발 관련 포스팅을 들고 왔네요.ㅎㅎ
오늘은 jQuery 라이브러리를 하나 소개시켜 드리려 합니다.
nemocube 라는 라이브러리 인데요.
컨텐츠에 들어가는 이미지들의 위치에 따라 맵핑을 해주는 라이브러리입니다.
스크롤에 따라 맵을 해주는 기능에 대한 구현은 그리 어렵지는 않은데요.
이 라이브러리의 장점은 맵핑 뿐 아니라, 더불어 큐브의 세 면을 통해 컨텐츠를 제어 할 수 있게끔 도와주는 점이에요.
먼저 아래 페이지를 통해 적용 되어 있는 라이브러리를 확인 해 보세요.
라이브러리 적용 페이지 - http://bigphu.tistory.com/78
* 라이브러리 적용 모바일 화면
* 라이브러리 적용 PC 화면
각면에 YOUTUBE, IMG, LINK 상관없이 URL 주소만 입력하면 큐브 생성이 가능해요.
자세한 사용 방법을 알아 보도록 하겠습니다.
1. 먼저 라이브러리 관련 script/css 소스들을 링크 시켜야 겠죠 ?
<script src="http://nemolade.com/lib/js/nemocube.jquery.min.js"></script>
<link rel='stylesheet' type='text/css' href='http://nemolade.com/lib/css/nemocube.min.css'>
위 두 태그를 <head></head> 안쪽에 추가해주세요.
2. 큐브 영역 설정 및 생성
다른 라이브러리와 마찬가지로 태그를 통해 영역을 주고 스크립트를 통해 생성하게 됩니다.
<div></div> 태그를 이용해 id를 설정해 주시고 style 또는 css를 통해 크기를 지정해주세요.
<script></script> 영역에서 $('지정된id').get_cube_content(option); 라는 함수를 호출하여 큐브를 생성합니다.
설정하는 option은 아래에서 같이 확인 해 보도록 해요~
3. API 살펴보기
위에서 get_cube_content(option) 함수를 언급 하였는데요.
option 영역은 object 형태로 전달되게 됩니다.
3D cube를 사용하기 전 간단하게 옵션 몇 가지를 살펴볼까요?
옵션명 |
기능 |
비고 |
url, top_url, right_url |
각 면 컨텐츠 URL |
url 영역의 링크 상태에 따라 맵의 썸네일 이미지 생성 |
planeColor |
가이드 큐브 활성화 영역 색상 |
해시코드, rgb코드 |
newTab |
웹 페이지 링크 url 입력 시 새창보기 설정 여부 |
true:설정 / false:비설정 |
cubeMapWidget |
큐브의 위치로 스크롤 맵핑 해주는 아이콘 생성 여부 |
true:생성 / false:비생성 |
showShadow |
큐브영역 바깥쪽의 그림자 버튼 설정 여부 |
true:설정 / false:비설정 |
4. 사용 예제
- 예제 소스
** 참고로 nemocube는 jquery 기반 라이브러리 이기 때문에 jquery 사용을 해주셔야 적용이 가능합니다!
- 예제소스 결과
(위 예제의 경우 좌측 url이 유튜브 URL이라 유튜브 썸네일로 표현되었습니다.)
큐브를 하나만 생성했기 때문에 맵도 하나만 표시가 되었는데요.
이런식으로 컨텐츠 내에 여러개의 큐브를 설정하게 되면, 순차적으로 맵이 생성이 됩니다.
여러개의 큐브를 사용 하실 때에는 설정 영역의 <div> 태그 id를 각각 다르게 설정해주시고요!!
꼭 세개의 면을 다 이용하지 않고 url만 입력하여도 맵 사용이 가능하니 참고 부탁드려요 ㅎㅎ
원하는 컨텐츠로의 즉시 이동 되는 점, 제자리에서 세 가지의 컨텐츠 이용이 가능한 점이 유용한 것 같습니다.
사용 시 어려운 점 있으면 댓글 남겨 주세요^^
'프로그래밍 > 기타' 카테고리의 다른 글
| [LINUX] crontab 스케쥴러 실행 안 될 때 / 크론탭 실행 안 됨 (0) | 2018.08.06 |
|---|