Highlight Links And Words Using Jquery
Posted by Aakash Doshi
On
Friday, October 21, 2011
If you have a very long page full of words and other stuff and you want a user to check out the particular link or word then Jquery eyes attractor is what you need.The jQuery Eyes Attractor Plugin attracts the visitors eyes to an specific object on the page.
How to use it?
suppose you want to highlight or animate a particular object on your webpage then surround it with any tag along with a UNIQUE ID.I am using SPAN TAG to animate word "awesome" as shown in code below and also create a link for that object
-------------------------------------------------------------------------------------------------------------
<body>
<div id="example1"><a href="#">Run example 1</a></div>
The green fairies are just normal fairies
and the yellow fairies
are people such as nurse fairies etc.
<span id="attractor1">awesome</span>
Don't tell anyone this but I'm a fairy.
</body>
-------------------------------------------------------------------------------------------------------------
Now all you have to do is implement both link as well as word ID in jquery as shown below :
<script type="text/javascript">
$(document).ready(function() {
$("#example1").click(function(){
$("#attractor1").eyesattractor();
});
Or with Options as$("#example1").eyesattractor({
duration: 3000,
animationSteps : 3,
symbol : "*",
color : "#f00"
});------------------------------------------------------------------------------------------------------------
And dont forget to import jquery with latest version.check out the demo below and download the script.Licensed under the MIT license.
Dont Forget To Subscribe And Like us To Get daily Upadates For Free :-)


| Like us on Facebook to get daily Amazing Things |

