background preloader

Flip эффект

Facebook Twitter

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.

BookBlock: A Content Flip Plugin

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. 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). 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.

Flippage by marcbuils

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 Navigateurs normalement compatibles iPhone/iPad/iPod Touch - Android - Firefox 3.6+ - Chrome - IE 9 (sans animation) - IE 10. 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 - jQuery Plugin

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: более 20 мощных плагинов типа Flipbook. Многие сайты используют подобные jQuery-плагины для предоставления каталогов продукции, продающих брошюр и так далее, и все это не просто так. jQuery-решения, позволяющие вам листать блоки контента, предлагают вам пользователям очень удобный способ ознакомиться с тем, что вы готовы предложить им.

Эффект перелистывания страниц на jQuery: более 20 мощных плагинов типа Flipbook

Если все сделать правильно, но такие электронные брошюры будут работать не хуже настоящих напечатанных, которые можно держать в руках. При помощи специальных плагинов, вы можете позволить посетителям вашего сайта без труда перелистывать страницы и чувствовать, будто они читают настоящую книгу. Использование jQuery-плагинов с эффектом перелистывания позволит вам представлять содержимое вашего сайта в более привлекательной манере. Перед тем, как выбрать подходящее вам решение, вам следует получить некоторый технический навык. Flippy a jQuery flip effect plugin. Markup First, add Flippy JS in your page.

Flippy a jQuery flip effect plugin

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…). 3D cлайдер переворачивание страниц на СSS3 и jQuery на сайте TrueQuery.ru. 3D cлайдер flipbook для сайта на СSS3 и jQuery. В продолжение предыдущей статьи мы рассмотрим весьма интересный слайдер flipbook для сайта.

3D cлайдер flipbook для сайта на СSS3 и 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.

Moleskine Notebook with jQuery Booklet

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. 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 we used the pixel perfect PSD provided by premiumpixels.com underSimple Little Arrows (PSD) Ok, so let’s get started!

The Markup. The jFlip plugin. A flipping page gallery This plugin builds an image gallery made as a book.

The jFlip plugin

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.