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:

http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/

Related:  flip эффектGeradores & CódigosFront-end

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. We will create a virtual Moleskine notebook with latest posts from the blog. Add a Touch of Realism to Your Google Maps Using the Google Maps API is one of the most popular (if not the most popular) way to show geo-locations on today's websites. In this tutorial I'll demonstrate how I give my google maps a more realistic look and I'll give you some tips on how to make your own maps really shine! Step 1: Warming Up Our aim is to give the map a realistic look, while still allowing the user to zoom and pan it. We're going to obtain this effect by creating a semi-transparent .png image that will mask the map, then we'll use some CSS to position it on top of the map.

Cross-browser Web Fonts part 3: Hyphens, Text Rendering, and Font Feature Settings Widespread browser support for @font-face has done wonders for web typography, allowing us the freedom to use custom fonts wherever we want. But different fonts are not the whole story with web typography. There are other things that the web has long been weak at, such as proper hyphenation of long words, and usage of open type font features such as ligature and stylistic swashes that often get locked away inside font files and never see the light of day. In this article we will look at some of these new CSS font features.

Windy: A Plugin for Swift Content Navigation This jQuery plugin can be used to swiftly navigate content items. The effect will make the items fly away like a deck of cards caught in a tiny storm. View demo Download source 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.

How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3 As CSS3 becomes more robust and is more widely supported, the options for fun modern design elements that can be created without graphics are virtually limitless! For a recent project, I decided to see if I could create a centered ribbon banner with pure CSS3. This tutorial will walk you through how it was done. As it turns out, it’s actually quite easy, using only simple, semantic HTML and some CSS3 trickery thanks to the magic of the the border-width property. The only caveat: As with all new CSS3 techniques, it can act a bit wonky in some IE browsers... we'll address that at the end of the tutorial.

How to create a parallax scrolling website using Skrollr.js Today’s parallax website tutorial is a detailed explanation of the Parallax Scrolling Effect using Skrollr.js published a few weeks ago. You will learn how to create a simple parallax scrolling website using Skrollr.js plugin. If you haven’t seen the demo already, go and check it out. It will give you a clear understanding of what we are talking about in the sections below. View Demo Download Files Introduction Top 30 Responsive jQuery Slider Plugins for Websites Responsive website design has been taking over the industry for the last year. Creating a fully responsive website that only consists of text and basic images is easy enough, but what about “real world” websites which often times consist of image galleries and sliders? Luckily developers have been hard at work over the last year, creating a variety of fully responsive image sliders and galleries. Here is a list of the top 30 responsive jQuery image sliders (in no special order).

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.

Dailymarkup.com - Plugin Repository Dailymarkup Development Blog Key Features: Keyboard Navigation (arrowkeys + ESC) Highly Customizable Autoplay Todo Accessible Todo Cross Browser Compatibility TweakStyle - Your next Code Editor Crowdfunding campaign ended The crowdfunding campaign have now reached its deadline. Thanks to all of you, we have raised more than $8000.We're extremely grateful for that and we're going to do everything in our power to deliver the very best product for you all. What is TweakStyle? TweakStyle is an upcoming code editor for web designers and web developers, focused on frontend development. Why TweakStyle?

15 jQuery Space-Saving Content Sliders and Carousels We all know about the popularity of jQuery image and video sliders and carousels. For the most part they are all feature-rich and perfect in their own way, but very few of them have been built to accommodate non-image content (blocks of text) that would allow you to have, for example, a rotating featured content area or a popular post section. Why is that? 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.

Related: