Smooth Text Highlight Effect with jQuery and jQuery UI - Magic Wand

File Size: 5.21 KB
Views Total: 3309
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smooth Text Highlight Effect with jQuery and jQuery UI - Magic Wand

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.