Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    Tags

    BookBlock: A Content Flip Plugin in jQuery

    BookBlock: A Content Flip Plugin in jQuery

    Contents

    A jQuery plugin that will create a booklet-like component that lets you navigate through its items by flipping the pages.

    One might say that “a weblog is a hierarchy of text, images, media objects and data, arranged chronologically, that can be viewed in an HTML browser”. Needless to say, one may use this media to publish information on any subject, such as oneself. Thus, reading a blog would be like reading a book.

    BookBlock is a plugin that allows pages to “flip”. Any content can be used, including images as well as text. The plugin transforms the structure only when needed (i.e. when flipping a page). In addition, going through pages is even more fun with cool effects consisting of shadows and overlays that make “flipping” more real. Try it now! Who said you can’t flip pages on your web browser?

    A demo of a colorful website with pictures and text

    Here is the link to the demo page: http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/

    Text over white and grey background

    Here is the link to download files: http://tympanus.net/Development/BookBlock/BookBlock.zip

    Code

    The following structure will allow adding custom content in a wrapper with the “class bb-item”, which represents an open page (left and right side):

    <div id="bb-bookblock" class="bb-bookblock">
    	<div class="bb-item">
    		<!-- custom content -->
    	</div>
    	<div class="bb-item">
    		<!-- ... -->
    	</div>
    	<div class="bb-item">
    		<!-- ... -->
    	</div>
    	<div class="bb-item">
    		<!-- ... -->
    	</div>
    	<!-- ... -->
    </div>

    The plugin can be called like this:

    $(function() {
    	$( '#bb-bookblock' ).bookblock();
    });
    Calendar over a pink background

    Options

    The following options are available:

    // vertical or horizontal flip
    orientation : 'vertical',
    
    // ltr (left to right) or rtl (right to left)
    direction : 'ltr',
    
    // speed for the flip transition in ms.
    speed		: 1000,
    
    // easing for the flip transition.
    easing		: 'ease-in-out',
    
    // if set to true, both the flipping page and the sides will have an overlay to simulate shadows
    shadows		: true,
    
    // opacity value for the "shadow" on both sides (when the flipping page is over it).
    // value : 0.1 - 1
    shadowSides	: 0.2,
    
    // opacity value for the "shadow" on the flipping page (while it is flipping).
    // value : 0.1 - 1
    shadowFlip	: 0.1,
    
    // if we should show the first item after reaching the end.
    circular	: false,
    
    // if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.
    nextEl		: '',
    
    // if we want to specify a selector that triggers the prev() function.
    prevEl		: '',
    
    // If true it overwrites the circular option to true!
    autoplay        : false,
    		
    // time (ms) between page switch, if autoplay is true. 
    interval        : 3000,
    
    // callback after the flip transition.
    // page is the current item's index.
    // isLimit is true if the current page is the last one (or the first one).
    onEndFlip	: function( page, isLimit ) { return false; },
    
    // callback before the flip transition.
    // page is the current item's index.
    onBeforeFlip: function( page ) { return false; }
    Picture of a deer and birds in snow over a beige background

    Check out our other goodies at Code Canyon.

    Comments
    0 response

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    JS react developer – 20 questions for a job interview
    • Technology
    • Trends

    JS react developer – 20 questions for a job interview

    May 24, 2023 by createIT
    PHPStorm – how to replace HTML tags using regex?
    • Dev Tips and Tricks

    PHPStorm – how to replace HTML tags using regex?

    May 18, 2023 by createIT
    Ultimate GDPR – get user consent logs
    • Dev Tips and Tricks

    Ultimate GDPR – get user consent logs

    May 5, 2023 by createIT
    Backend Developer – how to become one?
    • Technology
    • Trends

    Backend Developer – how to become one?

    May 5, 2023 by createIT
    SEO Checklist for website migration
    • Services

    SEO Checklist for website migration

    April 4, 2023 by createIT
    A game changer for WooCommerce users
    • Our Highlights

    A game changer for WooCommerce users

    March 24, 2023 by createIT
    Write content that sells
    • Trends

    Write content that sells

    March 21, 2023 by createIT
    The differences between a web app and a mobile app
    • Services
    • Technology
    • Trends

    The differences between a web app and a mobile app

    March 7, 2023 by createIT
    Webrooming and showrooming
    • Trends

    Webrooming and showrooming

    February 14, 2023 by createIT
    PHPStorm – fix long load time of a directory window
    • Dev Tips and Tricks

    PHPStorm – fix long load time of a directory window

    January 20, 2023 by createIT

    Technology
    Be on the same page as the rest of the industry.

    Contact us