Full version: jsB@nk » Form » Animate your form elements
URL: https://www.javascriptbank.com/animate-your-form-elements.html
This eyecatching script applies a very smooth coloring animation to the form element in focus. You may choose among 5 different coloring-effects. Surprising way to make your visitors fill out the forms on your site. Copy and paste installation.
Full version: jsB@nk » Form » Animate your form elements
URL: https://www.javascriptbank.com/animate-your-form-elements.html
<SCRIPT>// Animate your form elements///////////////////////////////////////////////////////////////////////////// CONFIGURATION STARTS HERE///////////////////////////////////////////////////////////////////////////// Choose a coloring effect by configuering the variable fade-effect below:// Set 1 if the background should fade from dark to medium and back to dark// Set 2 if the background should fade from light to medium and back to light// Set 3 if the background should fade from light to dark and back to light// Set 4 if the background should fade from light to very light and back to light// Set 5 if the background should fade from dark to very dark and back to darkvar fade_effect=4///////////////////////////////////////////////////////////////////////////// CONFIGURATION ENDS HERE///////////////////////////////////////////////////////////////////////////var eventobj=falsevar timervar previouscolorvar ns6=document.getElementById&&!document.allif (fade_effect==1) {var darkmax=1var lightmax=127}if (fade_effect==2) {var darkmax=127var lightmax=254}if (fade_effect==3) {var darkmax=1var lightmax=254}if (fade_effect==4) {var darkmax=180var lightmax=254}if (fade_effect==5) {var darkmax=1var lightmax=80}var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')var redrgb=lightmaxvar greenrgb=lightmaxvar bluergb=lightmaxvar redcol_1var redcol_2 var greencol_1 var greencol_2 var bluecol_1 var bluecol_2 var stepmax=15var stepred=Math.ceil(stepmax*Math.random())var stepgreen=Math.ceil(stepmax*Math.random())var stepblue=Math.ceil(stepmax*Math.random())function setrandomstep() {stepred=Math.ceil(stepmax*Math.random())stepgreen=Math.ceil(stepmax*Math.random())stepblue=Math.ceil(stepmax*Math.random())}function makedarker() {redrgb-=stepredgreenrgb-=stepgreenbluergb-=stepblueif (redrgb<darkmax) {redrgb=darkmax}if (greenrgb<darkmax) {greenrgb=darkmax}if (bluergb<darkmax) {bluergb=darkmax}if (redrgb>darkmax || greenrgb>darkmax || bluergb>darkmax) { redcol_1 = hexc[Math.floor(redrgb/16)]; redcol_2 = hexc[redrgb%16]; greencol_1 = hexc[Math.floor(greenrgb/16)]; greencol_2 = hexc[greenrgb%16]; bluecol_1 = hexc[Math.floor(bluergb/16)]; bluecol_2 = hexc[bluergb%16]; var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2 eventobj.style.backgroundColor=backcolortimer=setTimeout("makedarker()",20); } else { clearTimeout(timer)setrandomstep()setTimeout("makelighter()",20) }}function makelighter() {redrgb+=stepredgreenrgb+=stepgreenbluergb+=stepblueif (redrgb>=lightmax) {redrgb=lightmax}if (greenrgb>=lightmax) {greenrgb=lightmax}if (bluergb>=lightmax) {bluergb=lightmax}if (redrgb<lightmax || greenrgb<lightmax || bluergb<lightmax) { redcol_1 = hexc[Math.floor(redrgb/16)]; redcol_2 = hexc[redrgb%16]; greencol_1 = hexc[Math.floor(greenrgb/16)]; greencol_2 = hexc[greenrgb%16]; bluecol_1 = hexc[Math.floor(bluergb/16)]; bluecol_2 = hexc[bluergb%16]; var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2 eventobj.style.backgroundColor=backcolortimer=setTimeout("makelighter()",20); } else { clearTimeout(timer)setrandomstep()setTimeout("makedarker()",20) }}function animate(e) { if (document.all) { if (eventobj) { eventobj.style.backgroundColor=previouscolor } clearTimeout(timer) eventobj= event.srcElement previouscolor= eventobj.style.backgroundColor makedarker() }}function stopit() { if (document.all) { clearTimeout(timer) eventobj.style.backgroundColor=previouscolor }}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><INPUT onblur=stopit() onfocus=animate(event) style="FONT-SIZE: 8pt" type=button value="Test the highlight-animation on this button"><BR><BR><TEXTAREA cols=30 onblur=stopit() onfocus=animate(event) rows=4 style="FONT-SIZE: 8pt">Test the highlight-animation on this form element. Test the highlight-animation on this form element. Test the highlight-animation on this form element. </TEXTAREA><BR><BR><INPUT onblur=stopit() onfocus=animate(event) size=60 style="FONT-SIZE: 8pt" value="Test the highlight-animation on this textfield"><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->