Flip Over DOM Elements With CSS and Javascript - Flippant.js
File Size: | 5.44 KB |
---|---|
Views Total: | 1505 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Flippant.js is a tiny and customizable javascript library that enables you to flip over DOM Elements using CSS3 and javascript. 74.3% of the magic is in the flippant.css. Override however you'd like.
How to use it:
1. Include necessary javascript and CSS files in your document
<link rel="stylesheet" type="text/css" href="flippant.css"> <script type="text/javascript" src="flippant.js"></script>
2. Basic Usage
var front = document.getElementByID('flipthis') , back_content = "<h1>I'm the back!</h1>" // Generate or pull any HTML you want for the back. , back // when the correct action happens, call flip! back = flippant.flip(front, back_content) // this creates the back element, sizes it and flips it around. // invoke the close event on the back element when it's time to close. // 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)
This awesome jQuery plugin is developed by mintchaos. For more Advanced Usages, please check the demo page or visit the official website.