Home » HTML5, Javascript

HTML5 – CSS – jQuery Flipbook | flip book animation without flash

13 April 2011 3 Comments
Share on Facebook

A flipbook in flash used extensively three – five years back, even many of the websites are launched using the flip book component in Flash. With the HTML5 and CSS3 animations can also be created using HTML-CSS and jQuery. In older days flip book contains series of pages with pictures and will be animated when turned rapidly. The same concept can be used in software to simulate the same effect.

 

Also see this articles about HTML5:

 

Here we are going to see some of the examples of such books created using HTML and CSS without flash plugin. Many of the flip book examples with source available.

Html5rocks:

20thingsilearned flipbook

http://www.html5rocks.com/tutorials/casestudies/20things_pageflip.html

Purdue:

purdue flip book

http://www.purdue.edu/discoverypark/viewbook/overview/

Tympanus:

tympanus flipbook

http://tympanus.net/Tutorials/MoleskineNotebook/

Romancortes:

romancortes flip book

http://www.romancortes.com/ficheros/page-flip.html

Sitepoint:

sitepoint flipbook

http://blogs.sitepoint.com/javascript-sprite-animation-using-jquery/

Dynamicdrive:

dynamic drive

http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

jQuery Flip plugin:

jquery flipbook plugin

http://www.jquery.info/scripts/jFlip/demo.html

 

Keywords to here:

  • html5 css book effect
  • html5 css viewbook
  • viewbook jquery
  • html5 css flip book
  • jquery flip book effect
  • jquery book plugin
  • book effect html5
  • jquery flipbook plugin
  • HTML5 book flip

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


  • Cheap SSl

    it is a good idea to look for book reviews first before buying an expensive book ………

  • BCmoney

    Nice summary of an excellent effect. Hope the pure CSS3 approach using animations comes to FF soon, maybe it will be in the full release of FF5+nnAlso worth mentioning is this little jQuery port of a Silverlight page flip effect:nhttp://jpageflipper.codeplex.com/n

  • Andy

    Is it possible to make it scalable to the browser window?