CSS Flip Book jQuery Plugin

August 28, 2013 at 4:11 pm By
Download Demo

Hey! Today I want to share with you this jQuery flip book plugin that I’ve put together. Using 3D transforms and just a little jQuery you can use it too. Below I’ll outline exactly how it works.

So I wrote this a while ago but unfortunately it was mired with bugs and problems. I decided to rewrite it to make a bit more usable for everyone, as well as give it a place where I could provide updates if I so wished. So here it is!

The Plugin

The plugin uses 3D transforms activated by jQuery to create the effect. The slides are moved around using jQuery in order to create a continuous effect, but behind the scenes things are a little bit more complex than just flipping, and to create this effect there was a lot of appending and waiting.

Using it

To begin, create your HTML. It’s going to look like this. Update the images as you see fit. The content divs are optional, but they add a little extra I think.

<div id="flipbook">
	<div class="slide">
		<img src="images/1.jpg" alt="" /> 
		<div class="content"><a href="#">Flowers: What you didn't know</a></div> 
	</div>
	<div class="slide">
		<img src="images/2.jpg" alt="" /> 
		<div class="content"><a href="#">Flowers: Real or Fiction?</a></div> 
	</div>
	<div class="slide">
		<img src="images/3.jpg" alt="" /> 
		<div class="content"><a href="#">A Flower ate my Baby!</a></div> 
	</div>
	<div class="slide">
		<img src="images/4.jpg" alt="" /> 
		<div class="content"><a href="#">Will Flowers Destroy Earth?</a></div>
	</div>
</div>

The image is necessary, however we don’t actually use the image, we split it up using CSS. The image you see is hidden and then the URL is put into a background CSS tag so we can manipulate it a little better. Next up, include the plugin. I’ve commented it so you can see exactly what’s going on. You also have to include the CSS so everything works correctly. Don’t forget to include jQuery!

You also want to get yourself a copy of modernizr with css 3D transforms. Don’t worry, that’s all included in the download. Modernizr will help make this at least usable in IE8.

<link rel="stylesheet" href="pictureflip.css">


Then we run the plugin. There are a few options which are as follow:

  • time – The time you wish the flip over animation to occur in, in seconds with no units. The default is 1 second.
  • shadow – Whether or not you want a shadow to appear as the flip animation occurs. It can be set to true or false. This can cause some performance issues occasionally. The default is true.
  • slideTime – The time for which the content of the slide will take to slide up in seconds with no units. The default is 0.1 seconds.
  • autorun – Can be set to true or false, and determines whether automatic flips of the slides will occur if the user is ignoring the slides. The default is false.
  • autoTime – The time you wish there to be between slide automatic flips in seconds. The default is 5 seconds, but if you set autorun to false this doesn’t matter.

So running the plugin could look like this:

<script type="text/javascript">
$(document).ready(function() {

	$('#flipbook').pageFlip({

		time : 2,
		shadow : false,
		slideTime: 0.3,
		autoRun: true,
		autoTime: 4

	});
});
</script>

Or alternatively:

<script type="text/javascript">
$(document).ready(function() {

	$('#flipbook').pageFlip();
});
</script>

And that’s it! Check out the demo to see it in action, or download the scripts using the download link above. Hope you enjoy, and have a good day.