jQuery Text Flip Animation Plugin - Flipping Text
File Size: | 5.97 KB |
---|---|
Views Total: | 4920 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Flipping Text is a jQuery animation plugin to create text flip animation for your typography.
How to use it:
1. Load the jQuery library and jQuery Flipping Text plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.flipping_text.js"></script>
2. Create the text you want to apply the flip animation.
<h2 class="demo">Your Text Goese Here</h2>
3. Call the plugin with default options.
<script> $(document).ready(function(){ $(".demo").flipping_text(); }); </script>
4. Configurations.
<script> $(document).ready(function(){ $(".demo").flipping_text({ tickerTime: 10, // Define a time between each ticket in milliseconds. The default value is 10. customRandomChar: false, // You can use your own random strings by defining them here. The default value is false which will use my random string: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' tickerCount: 10, // Set the number of characters randomly shown before the real text is shown here. The default value is 10. opacityEffect: true, // You can toggle the opacity effect here. Set this to false if you don't want the random text to fade in. The default value is 10. resetOnChange: false // Toggle this to true if you want the plugin to stop and fill in all the text immediately when the user changes browser's tab. The default value is false. }); }); </script>
This awesome jQuery plugin is developed by peachananr. For more Advanced Usages, please check the demo page or visit the official website.