A mini js+css library for flipping things over.
Try it out on the buttons below
Get the code at github.com/mintchaos/flippant.js
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Flippant is tiny. It does just enough and no more. It has zero dependencies.
Flippant is easily customized. A couple of arguments, and CSS.
Flippant exports a single function: flip
. Use it to flip things!
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)
Two modes: card
(the default), and modal
.
back = flippant.flip(front, back_content, 'modal')
The back gets the default class of flippant-modal-dark
for modal flips and
flippant-modal-light
for cards. These styles can be overriden or you can
pass in your own class.
back = flippant.flip(front, back_content, 'modal', 'my-modal-classname')
The full API:
flip(element_to_flip, content_for_back, type(modal/card), classname_for_back) -> back_element
74.3% of the magic is in the css file. Override however you'd like.