background preloader

BookBlock: A Content Flip Plugin

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:

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? Take a look at the project's GitHub Repository. 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!

Portfolio Flipping Slider Using jQuery & CSS3 There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform. Slider Behaviour The slider will change our portfolio images when it’s flipping, this flipping effect is triggered by user click on the pagination. We will create four flipping effects that will be used for animation, there are : horizontal left direction, horizontal right direction, vertical top direction and vertical bottom direction. Markup & Styling We will create a listing of images using unordered list and create a single div for wrapper, this wrapper will be used to display our portfolio image in grid style and will be generated using JavaScript so it will left blank. We also will create a class that have CSS animation, this class will be injected to when flipping the div. Here’s the expected result : JavaScript Done

20+ Powerful jQuery Flipbook Plugins | Goodfav Magazine A lot of websites use jQuery flipbook plugins to present their product catalogs, sales brochures etc., and for a good reason. jQuery flip solutions provide a convenient and effective experience for visitor to look through a large set of items. If done right it is almost like having a printed brochure in your hands. With a flipbook plugin, you can allow your website visitors to flip through pages easily as if they were reading in a real book. Making use of a jQuery flipbook will allow you to present more contents to the viewer and make it look impressive at the same time. Before you choose a solution, you need to be aware of some technical details. Some flipbook plugins are still based on Flash, and they do not really allow searchable content and does not work on iOS devices. This collection contains more than 20 jQuery flipbook plugins that replicate the effect of flipping through a book from page to page. Responsive Flip Book with Touch Support – MORE INFO The jFlip Plugin – MORE INFO

Эффект перелистывания страниц на jQuery: более 20 мощных плагинов типа Flipbook Многие сайты используют подобные jQuery-плагины для предоставления каталогов продукции, продающих брошюр и так далее, и все это не просто так. jQuery-решения, позволяющие вам листать блоки контента, предлагают вам пользователям очень удобный способ ознакомиться с тем, что вы готовы предложить им. Если все сделать правильно, но такие электронные брошюры будут работать не хуже настоящих напечатанных, которые можно держать в руках. При помощи специальных плагинов, вы можете позволить посетителям вашего сайта без труда перелистывать страницы и чувствовать, будто они читают настоящую книгу. Использование jQuery-плагинов с эффектом перелистывания позволит вам представлять содержимое вашего сайта в более привлекательной манере. Эта подборка состоит из более, чем 20 jQuery-плагинов соответствующего предназначения, которые позволят вам реализовать механизм перелистывания страниц. 01. Responsive Flip Book представляет собой HTML/jQuery-решение без необходимости устанавливать Flash Player. 02.

Related: