쉽게 사용하는 turn.js 튜토리얼

 

쉽게 사용하는 turn.js 튜토리얼

 

1.turn.js란?

turn.js는 책 또는 잡지를 구현하게 해주는 라이브러리(api)이다.

책 넘김효과, 페이지 이동, 책표지 등을 작업할 때 유용한 도구이다.

 

2. 적용방법

 

2-1 turn.js 다운로드

 

①깃허브에서 직접 받는다

https://github.com/blasten/turn.js

GitHub - blasten/turn.js: The page flip effect for HTML5

 

②공식 사이트에서 받는다

www.turnjs.com/

Turn.js: The page flip effect in HTML5

 

③구글 드라이브에서 받는다.(용량이 너무 커서 블로그에 안올라감)

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

turnjs4.zip

 

 

3.사용방법 

※1.7이상의 제이쿼리 필수

<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>

위의 코드를 사용하면 turn.js를 제대로 사용할 수 있다.

 

4.마치며

조금 난해한 코드 일지 몰라도 사용해보면 퀄리티 좋은 결과물을 만들수 있다.

다만 제이쿼리 1.7이상의 버전이 필수로 필요하기 때문에 제이쿼리를 반드시 사용해야 한다.

(없으면 작동하지 않는다)

위의 코드는 turn.js와 제이쿼리를 사용하여 만들었습니다.

제일 상단에 있는 코드와 같습니다.

 

다운받은 파일에 예제도 포함되어 있으니 공부해 보면 도움이 될겁니다.