Smooth Text Highlight Effect with jQuery and jQuery UI - Magic Wand
| File Size: | 5.21 KB |
|---|---|
| Views Total: | 3323 |
| 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.











