Jquery Color Changing Text Script
Use this simple jquery copy paste script to change text colors in your webpage on mouse hover.
Features
Script is based on the Jquery Event change() method. Showcase multiple colors smoothly on a text when mouse hover is made. Use jquery to hover a text with animation. Copy paste code for color changing text . Color animation that works on almost all modern browsers.
Preview
Color Changing Text Effect on Mouse Over
Every one can find fault, few can do better
Fire is a good servant but a bad master
Better the devil you know than the devil you don't know
Curses are like chickens, they come home to roost
Love covers a multitude of sins
Mirrors do everything we do, but they cannot think for themselves
Downloads
<!-- Script by hscripts.com --> <!-- Copyright by Hscripts --> <!-- More scripts @www.hscripts.com --> <html><head><title>Color Changing Text Effect on Mouse Over</title><script type='text/javascript' src='./jquery.js'></script> <script type='text/javascript'> var degre = 30; // Degree of colors var act = 0; // Flag during the action var hueelt = 0; // Hue var firselt = 128; // Saturation var valelt = 255; // Value var clrColor; // A color before the change var timer; // Timer function mover(idd) {$('#iid').val(idd)timer = setInterval("colorsChange()",100); } function mout(idd) {$('#'+idd).css('color','#000');clearInterval(timer); } // This function changes a color actually. function colorsChange() {var idd=$('#iid').val(); var clr=makesColors();$('#'+idd).css('color',clr); } // This function makes rainbow colors. function makesColors() {// HSVtoRGBif (firselt == 0){redelt = valelt; greelt = valelt; bluelt = valelt;}else{temp1 = valelt;temp2 = (255 - firselt) * valelt / 255;temp3 = hueelt % 60;temp3 = (temp1 - temp2) * temp3 / 60;if (hueelt < 60){redelt = temp1; bluelt = temp2; greelt = temp2 + temp3;}else if (hueelt < 120){greelt = temp1; bluelt = temp2; redelt = temp1 - temp3;}else if (hueelt < 180){greelt = temp1; redelt = temp2; bluelt = temp2 + temp3;}else if (hueelt < 240){bluelt = temp1; redelt = temp2; greelt = temp1 - temp3;}else if (hueelt < 300){bluelt = temp1; greelt = temp2; redelt = temp2 + temp3;}else if (hueelt < 360){redelt = temp1; greelt = temp2; bluelt = temp1 - temp3;}else{redelt = 0; greelt = 0; bluelt = 0;}}redelt = Math.floor(redelt).toString(16);greelt = Math.floor(greelt).toString(16);bluelt = Math.floor(bluelt).toString(16);if (redelt.length == 1) redelt = "0" + redelt;if (greelt.length == 1) greelt = "0" + greelt;if (bluelt.length == 1) bluelt = "0" + bluelt;hueelt = hueelt + degre;if (hueelt >= 360)hueelt = 0;return '#' + redelt + greelt + bluelt; } </script> <style type='text/css'> .textover{cursor: pointer;width: 450px;text-align: justify; } ul.stle{ list-style-type:disc; } </style></head><body> <div style=' padding-top: 50px; font-weight: bold; color: #4e4e4e;' align=center><h1>Color Changing Text Effect on Mouse Over</h1></div><div align='center' style='padding-left: 10px; padding-top: 25px;'><ul class='stle'><li id='p1' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Every one can find fault, few can do better</li><br><li id='p2' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Fire is a good servant but a bad master</li><br><li id='p3' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Better the devil you know than the devil you don't know</li><br><li id='p4' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Curses are like chickens, they come home to roost</li><br><li id='p5' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Love covers a multitude of sins</li><br><li id='p6' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Mirrors do everything we do, but they cannot think for themselves</li></ul> </div><table><tr><td><div style=" padding-left: 650px;font-size: 10px;color: #dadada;" id="dumdiv"> <a href="//www.hscripts.com" id="dum" style="padding-right:0px; text-decoration:none;color: green;">©h</a></div></td></tr> </table> <input type='hidden' id='iid' value=''></body> </html>
Release Date - 02-04-2013 Get free version without ©copyright link for just $10/ -
For customization of this script or any script development, mail to support@hscripts.com
Usage
Copy paste the Jquery color changing script in your webpage. Download jquery.js file and place the file in your folder. Now run the file in your browser to view the functionality of the script. You can change the sentences for which you want to animate the changing effects. <p align="center">Every one can find fault, few can do better</p> // Change the sentences here.
License
This Jquery code is given under GPL License
i.e. Free use for those who use the codes as it is.
Free, if your modification does not remove our copyright information and links.
Detailed License information can be found here .
You can purchase the script if your requirements does not meet our GPL License terms.
Related Scripts