[JS] 책 넘기는 효과 turn.js

책 넘기는 효과를 주는 turn.js입니다

 

 

사용 예시

 

↓↓ 아래의 동영상을 보면 충분 다하고 생각한다. ↓↓

 

 

 

1.다운로드

 

1-1. 구글 드라이브에서 받는다

https://drive.google.com/file/d/1GbYE6rOXLDMKwmKGNPQJ9yp87YCIc888/view?usp=sharing

turnjs4.zip

 

1-2. 사이트에서 받는다

www.turnjs.com/

출처 : turnjs.com

 

 

2. 실행 환경

2-1 필수사항

제이쿼리 1.3 이상의 버전 필수

 

2-2 적용 브라우저 

출처 : turnjs.com

2-3 적용 디바이스

안드로이드 : 크롬에서 사용 가능

애플 : ipad, iphone, ipod

 

 

3. 코드 및 사용법

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<div id="book">
	<div class="cover"><h1>The Bible</h1></div>
</div>

<div id="controls">
	<label for="page-number">Page:</label> 
    <input type="text" size="3" id="page-number"> of <span id="number-pages"></span>
</div>

<script type="text/javascript">

	// Sample using dynamic pages with turn.js
	// 페이지 설정
	var numberOfPages = 1000; 

	// Adds the pages that the book will need
	//페이지를 추가해주는 함수 addPage(페이지수,적용할책)
	function addPage(page, book) {
		// 	First check if the page is already in the book
		// 처음에 페이지가 이미 책에 있는지 확인한다 없다면 아래 실행
		if (!book.turn('hasPage', page)) {
			// Create an element for this page
			// 페이지 추가할것을 변수에 담는다
			var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
			// If not then add the page
			book.turn('addPage', element, page);
			// Let's assum that the data is comming from the server and the request takes 1s.
			setTimeout(function(){
					element.html('<div class="data">Data for page '+page+'</div>');
			}, 1000);
		}
	}

	$(window).ready(function(){
		$('#book').turn({acceleration: true,
			pages: numberOfPages,
			elevation: 50,
			gradients: !$.isTouch,
			when: {
			turning: function(e, page, view) {
				// Gets the range of pages that the book needs right now
				var range = $(this).turn('range', page);
				// Check if each page is within the book
				for (page = range[0]; page<=range[1]; page++) 
				addPage(page, $(this));					},
				turned: function(e, page) {
				$('#page-number').val(page);
				}
			}
		});

		$('#number-pages').html(numberOfPages);
		
		//input:text에 엔터를 감지했을때  keycode 13은 enter 키
		$('#page-number').keydown(function(e){
			if (e.keyCode==13)
				$('#book').turn('page', $('#page-number').val());
				
		});
	});

	$(window).bind('keydown', function(e){

		if (e.target && e.target.tagName.toLowerCase()!='input')
			if (e.keyCode==37)
				$('#book').turn('previous');
			else if (e.keyCode==39)
				$('#book').turn('next');

	});

</script>

적용이 힘들면 그대로 가져가서 조금씩 수정해보는 것도 좋다

 

4. 결과

See the Pen turn.js by 윤재현 (@jh91) on CodePen.