JavaScript Color Fading Script

« Dynamic Inline JavaScript Form Validation

Ultimate JavaScript Scroller and Slider »

2
May

Posted by Michael in Design, JavaScript

This lightweight JavaScript allows for easy color transitions. Add fading effects to tables, divs and more. You can target an elements background, border or text color.

Below is the command to call the function…

colorFade('divid','background','ece7b4','f9bcbc',25,30)

The first parameter is the id of the element you are targeting. The second is the property to fade which can be the background, border or text. The third is the hex value of the starting color. The third is the hex value to fade to. The fourth and fifth are both optional. The first is the the number of times to divide the color difference and the last is the transition speed.

This script has been tested working in IE6/IE7, Firefox, Opera and Safari. Please report all bugs to michael@leigeber.com.

Click here to view the demo.

Click here to download the script.

Update 5/5/2008 - I have tweaked a few things and integrated some performance improvements based on Nate’s suggestions.

4 Diggs

21 Responses

[...] Si queréis añadir un toque extra de estilo a vuestros sitios y mostrar una transición de color cuando el usuario pinche o pase sobre algún elemento de la página ahora podréis fácilmente con este script: Javascript color fading script [...]

Webmaster Libre | Transiciones de color con Javascript on 03 May 2008 at 5:23 am

Thanks! How would you make this work on page load? So that the color would fade as soon as the page loaded?

Zac on 03 May 2008 at 11:16 am

@Zac - Something like this should do the trick… you can view it at http://sandbox.leigeber.com/fader/fader3.html.

Michael on 03 May 2008 at 11:49 am

Thats a very nifty trick, its actually smoother then jquery. Nice work.

Web Development Blog on 04 May 2008 at 12:52 am

Very wordpreful work!!

Mondo Libero on 04 May 2008 at 1:48 am

[...] JavaScript Color Fading Script Related StuffCustom JavaScript Dialog Boxes60 More AJAX- and Javascript Solutions For Professional CodingdfFlexiGrid - Liquid Javascript Grid LayoutMac OS X-Style Dock Menu in Javascriptjavascript carouselsSwedish fika » Creating a fading headerGalleria - a Javascript Image GalleryHow to highlight search results with JavaScript | Eric Wendelin [...]

» JavaScript Color Fading Script Webcreatives on 04 May 2008 at 6:49 am

[...] lightweight JavaScript Color Fading Script. Add fading effects to tables, divs and more. You can target an elements background, border or text [...]

JavaScript Color Fading Script on 04 May 2008 at 2:40 pm

How can I do an automatic fade to two colors, I mean the div changes from black border to red?, and when the div changes to red, then it change again to black. Thanks

Mario on 04 May 2008 at 7:49 pm

@Mario - You would need to extend the colorFade function to take a third hex color, pass that variable to the animateColor, and then after line 65 in the else statement call the colorFade function again. Shoot me an email at michael@leigeber.com if you need any help figuring it out.

Michael on 04 May 2008 at 8:01 pm

very sweet! I was just looking for something like this. thanks!!

Shanna on 04 May 2008 at 8:38 pm

[...] JavaScript Color Fading Script. Este ligero script permite realizar transiciones de color. Esto nos permite añadir efectos de fundido a tablas, divs, etc. Podemos actuar sobre el fondo, el borde o el color del texto del elemento en cuestión. [...]

Intenta » Blog Archive » Links 05-05-2008 on 05 May 2008 at 2:30 am

Nice trick, also have a look at colorBlend plugin for jQuery which is really powerfull.

http://www.happinessinmycheeks.com/colorBlend/

Zero1infintiy on 05 May 2008 at 5:56 am

This works great, but I looked over the code and have a few suggestions to tighten it. What you have now is fine… just pointing out a couple of things I’ve picked up over the last few months, writing this kind of stuff.

eval() slows things down, and can be avoided in pretty much any situation.

You can get rid of your decConv function. Just replace it with:
parseInt(”[2 digit hex]“, 16);
//parseInt’s second parameter is the base, and default to base 8 if the first character is a “0″

This should also make your colorConv function much simpler. You could rewrite it as:
function colorConv(color) {
var rgb = [
parseInt(color.substring(0,2), 16),
parseInt(color.substring(2,4), 16),
parseInt(color.substring(4,6), 16)
];
return rgb;
}

setInterval can take an anonymous function instead of the eval’d string you currently pass, which also makes it easier to read/maintain:
target.timer = setInterval( function() {animateColor(id,element,steps,er,eg,eb,rint,gint,bint);}, speed);

Another little trick is to define undefined variables with ||
You could use the following:
steps = steps || 20;
speed = speed || 20;

You could also scope all functions inside of the colorFade function. This will make it so you only introduce 1 variable into the global namespace.

Nate on 05 May 2008 at 9:00 am

@Nate - Some really good suggestions there. I will look through my code and work in these and a couple other little things I noticed yesterday. Thanks for the tips.

Michael on 05 May 2008 at 9:15 am

[...] JavaScript Color Fading Script [...]

Max Design - standards based web design, development and training » Some links for light reading (6/5/08) on 05 May 2008 at 2:59 pm

[...] Источник: Блог Майкла Лейгебера. [...]

Эффект затухания в Javascript | АяксЛайн.ру on 05 May 2008 at 5:02 pm

[...] Read More [...]

JavaScript Color Fading Script « Designerz Web on 06 May 2008 at 12:50 pm

PERFECT TIMING! I’d visualized a fade-in a couple weeks ago. You posted this code on May 2 and modified on May 5. And I went lookin for code samples today, May 6. Lucky me.

I’ve applied your code via <body onload= … and it’s almost exactly what I need. The only enhancement I’d suggest is a “delay” parameter before the fader starts.

Thanks,
Richard

RP on 06 May 2008 at 2:25 pm

Is there anyway of putting the onmouseover and onmouseout in a javascript in the hedear, so you are left with a clean div?

<head>
<some java script that applies for someID>
</head>
<div id=”someID” class=”darkgrey”>Third Div</div>

Would be really grateful if you can mail me the solution, if there is one.

thanx alot
hamochi@gmail.com

hamochi on 06 May 2008 at 7:07 pm

@hamochi - Absolutely, I definitely recommend adding events dynamically. I wrote an article recently pointing that out. I would recommend not adding the JavaScript in the header but rather keep it all external. Plus if you try adding these events in the header you will get an error. You could add the events before the </body> if you have to must. You can add mouse events like the following…

document.getElementById(’id’).onmouseover = function() { whatever };
document.getElementById(’id’).onmouseout = function() { whatever };

Michael on 06 May 2008 at 8:39 pm

[...] JavaScript Color Fading Script- This lightweight JavaScript allows for easy color transitions. Add fading effects to tables, divs [...]

Exceptional Ajax/javascript Techniques (Recently Created) on 12 May 2008 at 12:04 am

Trackback URI | Comments RSS

JavaScript Color Fading Script

21 Responses

Leave a Reply