Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

flipMaster.js

flipMaster.js is a card flip plugin utilizing jQuery and CSS3 animations to create a card flipping animation. Instead of the usual card flip animation that only goes from front to back, this has a continuous flip in either direction. New content is injected into the card between each flip. There is also an option to set the card to have infinite flips or to have the card stop from moving forward if there isn't anymore content.

Demo: http://hassanhibbert.github.io/flipmaster/

Sample Usage:

Javascript Setup Part 1: Pass an array of DOM elements or string to the flipMaster.loadData method to populate the script with content.

flipMaster.loadData([
    'Content 1',
    'Content 2',
    'Content 3',
    'Content 4',
    'Content 5'
]);

Javascript Setup Part 2: Initialize script by passing the selectors with the corresponding elements for the flip animation.

flipMaster.init({
    cardFlip: '#card-flip',
    backBtn: '#btnB',
    forwardBtn: '#btnF',
    cardContent: '#card-content',
    infiniteFlip: true
});

Sample HTML Setup:

<div class="card-container">
    <div id="card-flip">
        <span id="card-content">Content</span>
    </div>
</div>

<button id="btnB" class="btn-styles"> Flip Backward </button>
<button id="btnF" class="btn-styles"> Flip Forward </button>

About

Cool card flipping animation project

Resources

Releases

No releases published

Packages

No packages published