Get a free advice now!

    Pick the topic

    [checkbox* "Developer Outsourcing" "Web developing" "App developing" "Digital Marketing" "eCommerce systems" "eEntertainment 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

    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
    reCAPTCHA v3 – WordPress implementation
    • Dev Tips and Tricks

    reCAPTCHA v3 – WordPress implementation

    January 20, 2023 by createIT
    How to compare GIT and server files
    • Dev Tips and Tricks

    How to compare GIT and server files

    January 19, 2023 by createIT
    How to trigger a click event inside iframe?
    • Dev Tips and Tricks

    How to trigger a click event inside iframe?

    January 19, 2023 by createIT
    FOOEvents – generate a custom CSV report
    • Dev Tips and Tricks

    FOOEvents – generate a custom CSV report

    January 19, 2023 by createIT
    Headless chrome – testing webgl using playwright
    • Dev Tips and Tricks

    Headless chrome – testing webgl using playwright

    January 18, 2023 by createIT
    Preview big SQL files with PilotEdit
    • Dev Tips and Tricks

    Preview big SQL files with PilotEdit

    January 18, 2023 by createIT
    Outsourcing a team of backend developers
    • Our Highlights

    Outsourcing a team of backend developers

    January 18, 2023 by createIT
    A new look for an aspiring brand
    • Our Highlights

    A new look for an aspiring brand

    January 18, 2023 by createIT
    Percy AI visual regressions – playwright example
    • Dev Tips and Tricks

    Percy AI visual regressions – playwright example

    January 17, 2023 by createIT

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

    Contact us