그냥 개발자 블로그

책장 넘기는 효과 제이쿼리(jquery) 플러그인 본문

소식/플러그인소식

책장 넘기는 효과 제이쿼리(jquery) 플러그인

마음이파파 2015. 9. 21. 15:36





2016/08/03 - [Jquery] - book.js 플러그인 - 책 넘기는 효과








최근까지 또는 현재까지도 아날로그 적인 동작을


백프로 디지털화하기는 힘들죠.


그중에 하나가 책장을 넘기는 효과인데요.


이를 구현하기 위해서 그동안 플래시와 액션스크립트를 많이 이용되어왔어요.


책 넘기는 효과를 제일 비슷하게 만들수 있으니까요.


하지만 단점이 플래시와 액션스크립트를 모르는 사람에게는 유지관리가 힘들고


플래시가 없는 환경에서는 보여지지가 않는다는거죠.








그래서 html5와 css3의 사용범위가 확대되는 만큼


제이쿼리(jquery)로 책장 넘기는 효과를 플러그인으로 만들려고 해봤어요.


하지만 책을 넘기는 효과의 알고리즘이 생각보다 너무 어렵더군요.


게다가 책 넘기는 효과를 잘못 알고리즘화해서 수차례 수정하게되면서


플러그인 제작 기간은 무한정 늘어나기 시작하더군요.


답답하고 안풀리고 돈이 되는것도 아니라 중도에 포기할까 했는데


그래도 완성 했네요. 감격이에요.


moon_and_james-12 






서론이 길어졌는데 책 넘기는 효과 제이쿼리(jquery) 플러그인 테스트 영상부터 보고 가실게요.







익스11, 크롬, 파이어폭스에서 확인해 봤는데 효과가 그럴싸 해요. ㅋㅋㅋ


book.js 라 이름 붙인 플러그인은 html과 css를 최소화하며


불필요한 동작을 최대한 제거하여 가볍고 심플한 동작을 목적으로 만들어졌어요.


그럼 이제 제이쿼리(jquery) 플러그인 사용법 예제를 보실게요.





 



<style>

      #book{width:800px; height:540px; border:1px solid #eee; margin:50px;}

#book .page{text-align:center;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="book.js"></script>


<script>

$(function(){

$('#book').book({

speed:15, //책 넘김 속도

bookgb: '#666' //페이지 없는곳 배경색

});

});

</script>


<body>

<div id="book">

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

</div>

</body>


 


예제에 사용된 html 이에요.


최상위 div의 id는 원하시는 것으로 해주시고요. 


내부 div의 class는 page로 꼭 써주세요.


그리고 그 내부에 img 태그가 들어가게 해주세요.





 




<style>

      #book{width:800px; height:540px; border:1px solid #eee; margin:50px;}

#book .page{text-align:center;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="book.js"></script>


<script>

$(function(){

$('#book').book({

speed:15, //책 넘김 속도

bookgb: '#666' //페이지 없는곳 배경색

});

});

</script>


<body>

<div id="book">

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

</div>

</body>



 


CSS는 최상위 div의 width와 height만 지정해주셔도 되요.


나머지는 예제에서 그냥 잘 보이라고 제가 추가로 넣은거에요.




 





<style>

      #book{width:800px; height:540px; border:1px solid #eee; margin:50px;}

#book .page{text-align:center;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="book.js"></script>


<script>

$(function(){

$('#book').book({

speed:15, //책 넘김 속도

bookgb: '#666' //페이지 없는곳 배경색

});

});

</script>


<body>

<div id="book">

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

</div>

</body>



 


이제 book.js를 연결해주시고요.




 





<style>

      #book{width:800px; height:540px; border:1px solid #eee; margin:50px;}

#book .page{text-align:center;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="book.js"></script>


<script>

$(function(){

$('#book').book({

speed:15, //책 넘김 속도

bookgb: '#666' //페이지 없는곳 배경색

});

});

</script>


<body>

<div id="book">

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

<div class='page'><img src=""></div>

</div>

</body>



document가 로딩이 완료되는 시점에

 

위와 같이 써주세요.


별로 한것도 없는데 책장 넘기는 효과 제이쿼리(jquery) 플러그인이 끝!


옵션에 대한 내용은 하단을 참조해주세요.


speed : 설정하지 않을 경우 속도는 10, 권장 속도는 10~20

bookbg : 표지 좌측 또는 마지막 페이지 우측 공간에 표시될 색을 설정, 미 설정시 #eee







책장 넘기는 효과의 제이쿼리(jquery) 플러그인은 


인터넷 서점의 책 미리보기, 전자출판사 샘플보기 등과 같은 곳에


쓰임이 많을 것으로 예상되네요. 


book.js 플러그인은 여기 share 영역에서


공유 되고 있으니 확인해보세요.






저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

소스 코드 보호 제이쿼리(jquery) 플러그인  (0) 2015.09.21
쇼핑몰 스카이배너 구현 제이쿼리 플러그인(jquery plugin)  (0) 2015.09.21
링크(href) 미리보기 기능 jquery plugin(제이쿼리 플러그인)  (0) 2015.09.21
탭 메뉴 만들기 jquery plugin (제이쿼리 플러그인)  (0) 2015.09.21
모바일웹에서 swipe menu 구현 제이쿼리(jquery) 플러그인  (0) 2015.09.21
'소식/플러그인소식' Related Articles more