일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- #솔루션
- 쇼핑몰
- #cgimall
- 홈페이지
- 홈페이지제작
- 웹솔루션
- #홈페이지
- CGIMALL
- #웹솔루션
- #이미지
- jquery
- 사이트제작
- #image
- #jQuery
- #쇼핑몰
- CSS
- javascript
- #CSS
- 해피씨지아이
- #happycgi
- happycgi
- 게시판
- php
- #동영상
- #해피CGI
- #업종별
- #뉴스
- #홈페이지제작
- 솔루션
- 해피CGI
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Touch-enabled Book/Page Flip Effect In jQuery 본문
웹프로그램밍 자료실/JAVA 자료
[해피CGI][cgimall] Touch-enabled Book/Page Flip Effect In jQuery
해피CGI윤실장 2020. 1. 6. 09:17책이나, 잡지의 책장 넘기는 효과를 모바일에서도 사용할 수 있는 3D로 생성하는 간단한 jQuery 스크립트입니다.
다운로드 받은 파일의 압축을 해제후
dist/index.html 파일을 웹브라우저에서 열어보면 확인이 가능합니다.
책장을 넘기는 효과를 3D로 구현해둔 예제입니다.
책장을 클릭하면,
실제 책장을 넘기듯한 효과를 이용해서 다음 페이지를 보여줍니다.
index.html 파일의 소스코드와, js 파일의 소스코드를 확인해보면
표시한 부분에 책의 내용을 넣으면 됩니다.
책장을 넘길때 화면에 표시되는 효과를 위한 css/css3 파일과,
js 파일
몇개를 이용해서
비교적 간단하게 웹페이지에서 책을 보는 효과를 적용해줄수 있네요.
페이지에 이미지를 포함시켜보니 잘
나오는걸로 봐서,
다양한 목적으로 활용하는게 가능해보이네요.
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
[해피CGI][cgimall] 클립보드에 텍스트 복사 JQuery 플러그인 - Copy to Clipboard (0) | 2020.01.13 |
---|---|
[해피CGI][cgimall] 스크롤링 탭 메뉴 플러그인 - ScrollTabs (0) | 2020.01.10 |
[해피CGI][cgimall] [jquery] jTippy tooltip plugin (0) | 2019.12.30 |
[해피CGI][cgimall] [jquery] wRunner Slider Plugin (0) | 2019.12.27 |
[해피CGI][cgimall] 콘텐츠 내용에 맞게 프레임크기 자동조정 - css trick (0) | 2019.12.26 |
Comments