An experiment/hack using getUserMedia to watch for swipes left and right with a hand. This could be applied to many different uses. Flipping through pictures in an image carousel, moving to the next item in a list, flipping pages of a book or magazine, etc.
Best jQuery Flipbook Plugins & Tutorials with Demo
3D FlipBook – Responsive jQuery Plugin
Responsive design – book resizes so it fits screen width or screen height depending on the layout, thumbnails are placed horizontally or vertically depending on the layout.
Features:
- optimized for mobile – look and feel of a native app on mobile with touch swipe, pinch zoom etc
- easy to use and customize – create book and change book settings in the xml. Change style in the css
- no Flash Player needed – works everywhere
- choose between 2 types of flip animation – 2d or 3d flip animation customizable animation speed and transition type
- show all pages – vertical or horizontal thumbnails depending on the layout, with scrollbar, optimized for mobile devices
- advanced zooming support with mouse wheel zoom on desktop, pinch zoom on mobile, scrollbars when zoomed, touch swipe, click and drag
- real fullscreen support – if fullscreen is not supported by the browser, the icon will not be shown in the menu, if fullscreen is supported it will expand the book in real full screen mode, not browser full screen
- 2 sets of iocns included – light and dark
3D Book Showcase with jQuery & CSS3
Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interactivity the user might find entertaining. The idea is taken from Lift Interactive (scroll down to see the book style).
jQuery UI FlipBook
FlipBook will take a sequential time series of images and animate them. Each image is shown for a short period of time and then replaced by the next image in the series. The animation begins as soon as the first image is loaded; images that have not yet been downloaded from the server are skipped. They are included in the animation sequence after they have been loaded by the browser.
Features:
- set the animation speed
- change animation direction
- exclude specific images
- single step through the images
- resizes to fit the images
Flippage: Turn pages of your DIVs
FlipPage is a jQuery plugin that creates the illusion of turning the pages of a book.Originally developed for a presentation on touch pad, it can also find its place in an application such as e-book.
This plugin was developed to use HTML5/CSS3 graphic hardware power and thus create a smoother animation.
Creating a Flipbook Image Slider with CSS3 3D Transforms and jQuery
Recently the ‘flip book’ effect has become really popular on a lot of websites, so I got to thinking about how you could go about pulling off that effect using some jQuery and CSS3. I find that most of the implementations of this code can get a little bit complicated, so I tried to make things as simple as possible.
We’re going to write this code as a jQuery plugin, so first you need to include jQuery. Next we want to include a script called Modernizr. We only need 3D Transforms, and you can download the required script from here. This will ensure everything will work fine in browsers which do not support 3D Transforms. Then you have to make a file called jquery.pictureflip.js which will be where we’re putting our plugin code!
BookBlock: A Content Flip jQuery Plugin
BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.
We will be using jQuery++ by Bitovi which has some add-ons for jQuery (specifically, to add the swipe event).
Bookflip : JavaScript Page Turn effects
Totally javascript Book Flip for page turn effects. Bookflip engine has been totally rebuilt for better modern browser performance(IE8 & 9).Place any html code within the books pages – div id=”pages” (#no longer inside bookflip div). Each code block within the pages div will be treated as a seperate book page. Setting are adjustable in the script.
