Event Based Text Animation Plugin with jQuery and CSS3 - WordMagik
File Size: | 7.23 KB |
---|---|
Views Total: | 4828 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
WordMagik is a jQuery text animation plugin that allows you to animate an array of words based on events. Animate.css is required for the CSS3 animations.
How to use it:
1. Include the required CSS files in the head section of the web page.
<link rel="stylesheet" type="text/css" href="css/wordmagik.animate.min.css" /> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css" />
2. Include jQuery library and the jQuery wordMagik script in the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.wordmagik.min.js"></script>
3. Initialize the plugin as follows.
<script type="text/javascript"> $(document).ready(function() { $(".demo").wordmagik({ randomize: true,// Randomize change of words wordList: [],// List of words to choose from onEvent: "hover",// Event to change the word on eventSelector: ".wmgk",// Selector to bind the event to animationIn: "bounceInRight",// In animation animationOut: "bounceOutLeft",// Out animation }); }); </script>
This awesome jQuery plugin is developed by amyth. For more Advanced Usages, please check the demo page or visit the official website.