Created
July 31, 2013 03:51
-
-
Save zhyq0826/6119138 to your computer and use it in GitHub Desktop.
flippan js demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Testing.</title> | |
| <link href="http://bootstrap.my.com/assets/css/bootstrap.css" rel="stylesheet"> | |
| <link rel="stylesheet" type="text/css" href="flippant.css"> | |
| <style type="text/css"> | |
| .container { margin-top: 2em; } | |
| h1 span { | |
| animation: flipper 3s ease-in 4s infinite; | |
| -moz-animation: flipper 3s ease-in 4s infinite; | |
| -webkit-animation: flipper 3s ease-in 4s infinite; | |
| transform-style: preserve-3d; | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| display: inline-block; | |
| } | |
| @-webkit-keyframes flipper { | |
| 0% { | |
| -webkit-transform: perspective(300px) rotateY(0deg); | |
| } | |
| 15%, 100% { | |
| -webkit-transform: perspective(300px) rotateY(360deg); | |
| } | |
| } | |
| @-moz-keyframes flipper { | |
| 0% { | |
| -moz-transform: perspective(300px) rotateY(0deg); | |
| } | |
| 15%, 100% { | |
| -moz-transform: perspective(300px) rotateY(360deg); | |
| } | |
| } | |
| @keyframes flipper { | |
| 0% { | |
| transform: perspective(300px) rotateY(0deg); | |
| } | |
| 15%, 100% { | |
| transform: perspective(300px) rotateY(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Main hero unit for a primary marketing message or call to action --> | |
| <div class="hero-unit"> | |
| <h1>Flippant.<span>js</span></h1> | |
| <p> | |
| A mini js+css library for flipping things over. | |
| <!-- <small class="muted">Bring Your Own Back.</small> --> | |
| </p> | |
| <p>Try it out on the buttons below</p> | |
| <p>Get the code at <a href="https://github.com/mintchaos/flippant.js">github.com/mintchaos/flippant.js</a> | |
| </div> | |
| <!-- Example row of columns --> | |
| <div class="row"> | |
| <div class="span4"> | |
| <h2>Heading</h2> | |
| <p>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. </p> | |
| <p><a class="btnflip btn" href="#">Modal »</a> <a class="btnflip btn card" href="#">Card »</a></p> | |
| </div> | |
| <div class="span4 flippant"> | |
| <h2>Heading</h2> | |
| <p>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. </p> | |
| <p><a class="btn btnflip" href="#">Modal »</a> <a class="btnflip btn card" href="#">Card »</a></p> | |
| </div> | |
| <div class="span4"> | |
| <h2>Heading</h2> | |
| <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> | |
| <p><a class="btn btnflip" href="#">Modal »</a> <a class="btnflip btn card" href="#">Card »</a></p> | |
| </div> | |
| </div> | |
| <hr> | |
| <h2>Whys and hows:</h2> | |
| <p>Flippant is tiny. It does just enough and no more. It has zero dependencies.</p> | |
| <p>Flippant is easily customized. A couple of arguments, and CSS.</p> | |
| <p>Flippant exports a single function: <code>flip</code>. Use it to flip things!</p> | |
| <pre> | |
| var front = document.getElementByID('flipthis') | |
| , back_content = "<h1>I'm the back!</h1>" <span class="muted">// Generate or pull any HTML you want for the back.</span> | |
| , back | |
| <span class="muted">// when the correct action happens, call flip!</span> | |
| back = flippant.flip(front, back_content) | |
| <span class="muted">// this creates the back element, sizes it and flips it around.</span> | |
| <span class="muted">// invoke the close event on the back element when it's time to close.</span> | |
| <span class="muted">// call the close method on the back element when it's time to close.</span> | |
| back.close() | |
| <span class="muted">// alternatively you can trigger a close event on the back element if you fancy. | |
| // var close_event = new CustomEvent('close') | |
| // back.dispatchEvent(close_event)</span> | |
| </pre> | |
| <!-- <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p> --> | |
| <p>Two modes: <code>card</code> (the default), and <code>modal</code>.</p> | |
| <pre>back = flippant.flip(front, back_content, 'modal')</pre> | |
| <p>The back gets the default class of <code>flippant-modal-dark</code> for modal flips and | |
| <code>flippant-modal-light</code> for cards. These styles can be overriden or you can | |
| pass in your own class. | |
| </p> | |
| <pre>back = flippant.flip(front, back_content, 'modal', 'my-modal-classname')</pre> | |
| <p>The full API:</p> | |
| <pre>flip(element_to_flip, content_for_back, type(modal/card), classname_for_back) -> back_element</pre> | |
| <p>74.3% of the magic is in <a href="flippant.css">the css file</a>. Override however you'd like.</p> | |
| </div> <!-- /container --> | |
| <script type="text/javascript" src="flippant.js"></script> | |
| <script type="text/javascript" src="browsery.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment