Skip to content
Cool card flipping animation project
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
Build
.gitignore
README.md

README.md

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>
You can’t perform that action at this time.