jQuery Flip
A lightweight jQuery plugin to create 3d flip animation. See the project page
Getting Started
CDN
https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js
Download
- [jquery.flip.js][max] (development version, commented ~9kB)
- [jquery.flip.min.js][min] (production version, minified ~4kB, gzipped ~2kB)
- [jquery.flip.min.js.map][map] (source map, ~5kB) [max]: https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.js [min]: https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js [map]: https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js.map
Bower
bower install flip
NPM
npm install nnattawat/flip
Usage
In your web page:
<div id="card"> <div class="front"> Front content </div> <div class="back"> Back content </div> </div> <script src="jquery.js"></script> <script src="jquery.flip.js"></script> <script> $(function($) { $("#card").flip(); }); </script>
Documentation and Example
Please refer to the project website
Development
Ensure that you have the latest Node.js and npm installed.
Test that Grunt's CLI and Bower are installed by running grunt --version
and bower --version
. If the commands aren't found, run npm install -g grunt-cli bower
. For more information about installing the tools, see the getting started with Grunt guide or bower.io respectively.
To run the demo locally, do the following.
npm install bower install
And run grunt command to create files in /dist folder.
grunt
What's new
Please refer to the release page