BookBlock: A Content Flip Plugin. A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages. View demo Download source BookBlock is a 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). The following structure will allow to add custom content in a wrapper with the class “bb-item”, which represents an open page (left and right side): The plugin can be called like this: $(function() { $( '#bb-bookblock' ).bookblock(); }); You also have to include the other scripts that are needed (see one of the demo files).
Options The following options are available: Check out the demos with different configurations: Fullscreen Pageflip Layout. A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. View demo Download source We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu.
We’ll show you how to customize BookBlock and use some available options for navigating the content. The idea is to navigate the pages using the arrows or swiping the pages, and to slide out the menu when clicking on the menu button. The sidebar menu will contain links to different pages, i.e. the table of contents. We’ll also use jScrollPane by Kevin Luck to add a custom scrollbar for the content when needed. Please note: CSS 3D transforms will only work in modern browsers that support those properties. The demo contains excerpts form the hilarious “The Funny Side of Physic” by A. The Markup. 3D Book Showcase. An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms. View demo Download source 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). What we did was to build a structure that we can transform into a 3D object with CSS 3D transforms. A book is build up as follows: < span >Anthony Burghiss</ span > < span >A Catwork Orange</ span > < p >Red snapper Kafue pike fangtooth humums slipmouth, salmon cutlassfish; swallower European perch mola mola sunfish, threadfin bream. The class names are based on the sides of a book when holding it and looking at the front, the cover. Turn.js: Make a flipbook with HTML5. Flippage by marcbuils. FlipPage est un plugin jQuery créant l'illusion de tourner les pages d'un livre.
Développé à l'origine pour une présentation sur tablette tactile, il peut aussi trouver sa place dans une application de livre électronique par exemple. Ce plugin a été développé en HTML5/CSS3 afin d'utiliser la puissance graphique hardware et de créer ainsi une animation plus fluide. Demo Rendu 1 Sources 1 Rendu 2 Sources 2 Installation npm install jquery-plugin-flippage Navigateurs normalement compatibles iPhone/iPad/iPod Touch - Android - Firefox 3.6+ - Chrome - IE 9 (sans animation) - IE 10 Navigateurs testés iPhone 3G / iPhone 3GS / iPad 1 / iPad 2 - Android - Firefox 6 - Firefox 7 Beta - Safari - IE9 Licence LGPL v3 Version actuelle v0.6.4 Changelog.
Flip! A jQuery plugin v0.9.9. Free HTML5 Flipbook Maker - Best HTML5 Interactive Publishing Solutions For Magazine, Brochure & Catalog! Booklet - jQuery Plugin. What is it? Booklet is a jQuery tool for displaying content on the web in a flipbook layout. It was built using the jQuery library. Licensed under the MIT license. Want to check out the source? See it work jQuery Booklet This is a sample booklet! Content Variety You can place any sort of html elements inside of your booklet pages. Default Options The default options include: Manual Page TurningThis option requires jQuery UI, but will degrade and be usable if not included. Move to the next page by dragging or the arrow keys to see the animation in action! Эффект перелистывания страниц на jQuery: более 20 мощных плагинов типа Flipbook. Многие сайты используют подобные jQuery-плагины для предоставления каталогов продукции, продающих брошюр и так далее, и все это не просто так. jQuery-решения, позволяющие вам листать блоки контента, предлагают вам пользователям очень удобный способ ознакомиться с тем, что вы готовы предложить им.
Если все сделать правильно, но такие электронные брошюры будут работать не хуже настоящих напечатанных, которые можно держать в руках. При помощи специальных плагинов, вы можете позволить посетителям вашего сайта без труда перелистывать страницы и чувствовать, будто они читают настоящую книгу. Использование jQuery-плагинов с эффектом перелистывания позволит вам представлять содержимое вашего сайта в более привлекательной манере. Перед тем, как выбрать подходящее вам решение, вам следует получить некоторый технический навык. Эта подборка состоит из более, чем 20 jQuery-плагинов соответствующего предназначения, которые позволят вам реализовать механизм перелистывания страниц. 01. 02. 03. 04. 06. Flippy a jQuery flip effect plugin. Markup First, add Flippy JS in your page. Be sure to have jQuery too !
The Flippy content need to be included in a container, this prevents random perspective effects with CSS : Simply call flippy() function If you want to reverse last flip, just use reverse() function. Options color_target : The targeted background color. Callbacks You can attach function to specific events. Known issues The depth parameter has a strange effect when CSS rendering is used Cross browser ? The Flippy plugin works fine for every modern web browser except Internet Explorer 8 and before (of course…). Licence Released under the MIT license. 3D cлайдер переворачивание страниц на СSS3 и jQuery на сайте TrueQuery.ru. 3D cлайдер flipbook для сайта на СSS3 и jQuery. В продолжение предыдущей статьи мы рассмотрим весьма интересный слайдер flipbook для сайта. Ключевая особенность данного ротатора состоит в том, что слайды меняются в виде перелистывания страниц, что создает иллюзию объемности. Кроме этого для слайда допускается два вида навигации.
Первая навигация реализована в виде боковых стрелок, а вторая при помощи круговых точек в низу слайда, при помощи которых можно с легкостью перейти к необходимому материалу. Такой слайдер станет отличным дополнением для вашего сайта. Такой слайдер реализован с помощью небольшого плагина, и поддерживается практически во всех современных браузерах. Шаг 1. Для начала мы начнем с разметки, так как мы будем использовать jQuery плагин, то для начала нам необходимо их подключить к странице. После того как подключили скрипты мы переходим к разметке. С разметкой мы закончили, как вы убедились -нет ничего сложного. Шаг 2. Теперь нам необходимо создать стрелки для навигации, тут все достаточно просто. Шаг 3. jQuery. Moleskine Notebook with jQuery Booklet. Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel.
We will create a virtual Moleskine notebook with latest posts from the blog. You can find the beautiful Moleskine Photoshop file by Dennern at deviantart here: My Moleskine (PSD) For the navigation arrows […] View demoDownload source Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. You can find the beautiful Moleskine Photoshop file by Dennern at deviantart here:My Moleskine (PSD) For the navigation arrows we used the pixel perfect PSD provided by premiumpixels.com underSimple Little Arrows (PSD) Ok, so let’s get started! The Markup The HTML structure will be made up of the booklet plugin markup which includes the div with the id “mybook”.
<div class="book_wrapper"><a id="next_page_button"></a><a id="prev_page_button"></a><div id="loading" class="loading">Loading pages... Let’s take a look at the style. The CSS. The jFlip plugin. A flipping page gallery This plugin builds an image gallery made as a book. You can flip the book pages to view the next or previous image clicking or dragging the animated corners shown when hovering on the gallery area. By the way, no flash needed! Author: Renato Formato. Documentation The plugin needs jquery 1.2.3. IE needs a modified version of excanvas I wrote that supports patterns (with a special feature to scale patterns) and rotated linear gradient. You need to add the following line to the head: How to use the plugin The plugin finds all the images inside the provided selector and build the flipping book gallery.
$(selector).jFlip(width,height,options) Arguments Events - since version 0.4 The elements on which jFlip is applied can bind the flip.jflip event, triggered on page flip The event handler has the following signature: function(event,current_page,total_pages) Download Update v0.4 (28/2/2009): New options to change the corners color and size. ExcanvasX Demo view the examples.