JavaScript Library To Flip Over DOM Elements – flippant.js

Category: Animation , Javascript | May 13, 2015
Author: mintchaos
Views Total: 1,418 views
Official Page: Go to website
Last Update: May 13, 2015
License: MIT

Preview:

JavaScript Library To Flip Over DOM Elements – flippant.js

Description:

flippant.js is a tiny and customizable JavaScript & CSS3 library intended to flip over DOM elements without any dependency.

How to use it:

Include the required flippant.css and flippant.js in your document.

<link rel="stylesheet" href="flippant.css">
<script src="flippant.js"></script>

Basic usage:

var front = document.getElementById('flipthis'), 

    // Generate or pull any HTML you want for the back.
    back_content = "&lt;h1>I'm the back!&lt;/h1>", 

    back

// when the correct action happens, call flip!
// flip(element_to_flip, content_for_back, type(modal/card), classname_for_back) -> back_element
// e.g. back = flippant.flip(front, back_content, 'modal', 'my-modal-classname')
// back = flippant.flip(front, back_content, 'modal')
back = flippant.flip(front, back_content)
// this creates the back element, sizes it and flips it around.

// call the close method on the back element when it's time to close.
back.close()

// alternatively you can trigger a close event on the back element if you fancy.
var close_event = new CustomEvent('close')
back.dispatchEvent(close_event)

 

 

You Might Be Interested In:


Leave a Reply