Everyone might have tried making a flipbook animation using the edges of notebooks or textbooks during their student days. Now, it’s time to do it as an adult using JavaScript and jQuery. Here’s how you can display a flipbook animation using jQuery.
Implementation Method
Instead of a textbook, this time we’ll use a single long vertical image. We’ll determine the display area and move it at regular intervals to create a flipbook animation effect.
Example of JavaScript Code to Display Flipbook Animation
※ Load the jquery.min.js (version 1.4 series) file. Set the ID for displaying the flipbook animation, the width (px) and height (px) of the display area, the frame rate (frames per second), the default image for switching (parapara_anime.jpg), the maximum number of frames for switching, etc., and use setInterval() to repeat the process.
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var id = "animation"; //ID for displaying flipbook animation
var width = 300; //Width of the display area (px)
var height = 300; //Height of the display area (px)
var fps = 6; //Frame rate (frames per second)
var src = "./parapara_anime.jpg";
var frame = 0;
var max_frame = 10; //Maximum number of frames for switching
var onceFlg = false;
$(document).ready(
function (){
$("#"+id).css({
"background":"url("+src+")",
"width":width,
"height":height
});
var interval = 1/fps*1000;
animation = setInterval(intervalEvent, interval);
});
function intervalEvent(){
$("#"+id).css({
"background-position":"0 "+ -height * frame +"px"
});
frame++;
if(frame>=max_frame){
if(onceFlg) clearInterval( animation );
frame = 0;
};
}
</script>
Example of CSS Code to Display Flipbook Animation
<style type="text/css">
<!--
h1{
font-size:14px;
font-weight:normal;
text-align:center;
}
h2{
font-size:14px;
font-weight:normal;
text-align:center;
line-height:1.4em;
}
#idBox{
width:300px;
height:300px;
margin:0 auto;
}
-->
</style>
HTML Code to Display Flipbook Animation
The flipbook animation is displayed within the specified area (id=”animation”) from the “Example of CSS Code to Display Flipbook Animation.”
<div id="idBox">
<div id="animation"></div>
</div>
Flipbook Animation Demo Page
Concerns
The vertical image can be large in file size, so it might be necessary to reduce the file size as much as possible. Alternatively, it might be a good idea to load the image once before executing the JavaScript process.
※ Please use this at your own risk. Do not use the Google Analytics tag from the demo page’s head tag.
