Animate your form elements

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.

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com Test the highlight animation below

Configuration

Step 1: Open your webpage. Paste the following code between the <head> and </head> tags of your webpage:

<SCRIPT>
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

// CREDITS:
// Animate your form elements
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.

///////////////////////////////////////////////////////////////////////////
// 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 dark
var fade_effect=4

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

var eventobj=false
var timer
var previouscolor
var ns6=document.getElementById&&!document.all
if (fade_effect==1) {
	var darkmax=1
	var lightmax=127
}

if (fade_effect==2) {
	var darkmax=127
	var lightmax=254
}

if (fade_effect==3) {
	var darkmax=1
	var lightmax=254
}

if (fade_effect==4) {
	var darkmax=180
	var lightmax=254
}

if (fade_effect==5) {
	var darkmax=1
	var lightmax=80
}
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')

var redrgb=lightmax
var greenrgb=lightmax
var bluergb=lightmax

var redcol_1
var redcol_2 
var greencol_1 
var greencol_2 
var bluecol_1 
var bluecol_2 
 
var stepmax=15
var 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 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>

Step 2: Paste the following red code into any form element (sample button):
<input type="button" onFocus="animate(event)" onBlur="stopit()" value="submit">

Step 3: Open your webpage. Go to the top of the script-code and choose a coloring-effect by setting the variable fade_effect.