Smooth Text Highlight Effect with jQuery and jQuery UI - Magic Wand
File Size: | 5.21 KB |
---|---|
Views Total: | 3311 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Magic Wand is a jQuery & jQuery UI plugin that adds a smooth highlight animation to the characters when mouse moving past them.
How to use it:
1. Include the necessary jQuery & jQuery UI in the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
2. Include the jQuery Magic Wand plugin after loading jQuery library.
<script src="js/magicwand.js"></script>
3. Call the plugin on the text container and done.
$(document).ready(function(){ $('.magic').magicWand({ 'animation': 'color', 'color': '#00FF00' }); });
4. Call the plugin on the text container and done.
$(document).ready(function(){ $('.magic').magicWand(); });
5. Customize the text highlight animation.
// animation speed speed: 500, // text scale scale: 5, // wrapper name for highlighted text tagName: 'i', // animation style // 'color' or 'random' animation: 'color', // color of the highlighted text color: '#ff0000'
This awesome jQuery plugin is developed by rendfall. For more Advanced Usages, please check the demo page or visit the official website.