웹솔루션개발 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 파일 몇개를 이용해서
비교적 간단하게 웹페이지에서 책을 보는 효과를 적용해줄수 있네요.


페이지에 이미지를 포함시켜보니 잘 나오는걸로 봐서,
다양한 목적으로 활용하는게 가능해보이네요.




홈페이지바로가기

Comments