Author: | mintchaos |
---|---|
Views Total: | 1,470 views |
Official Page: | Go to website |
Last Update: | May 13, 2015 |
License: | MIT |
Preview:

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 = "<h1>I'm the back!</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)