jQuery Random Link Color Animations
We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color.
The jQuery JavaScript
$(document).ready(function() {
var randomLinks = $('a.random-color');
var original = randomLinks.css('color');
randomLinks.hover(function() { //mouseover
var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$(this).animate({
'color': col,
'paddingLeft': '20px'
},1000);
},function() { //mouseout
$(this).animate({
'color': original,
'paddingLeft': '0'
},500);
});
});
For the color animation portion, you'll need an extra Color Animations jQuery plugin. The padding nudge is another neat effect. This effect isn't for everyone, but it can add another subtle effect to your jQuery-enabled website.
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![MooTools Overlay Plugin]()
Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are...
![Use Custom Missing Image Graphics Using MooTools]()
Missing images on your website can make you or your business look completely amateur.
Unfortunately sometimes an image gets deleted or corrupted without your knowledge.
You'd agree with me that IE's default "red x" icon looks awful, so why not use
your own missing image graphic?
The MooTools JavaScript
Note that...
Nicely done David! But I think you should do 256 since – i believe – (Math.floor(Math.random() * 255)) will never return 255, just 0- 254.
Nice idea David!
The animation is a little slow though…
Cool idea. I think that there should be some constraints on the colours though as sometimes the link turned off-white.
var col = ‘rgb(‘ + (Math.floor(Math.random() * 51)) + ‘,’ + (Math.floor(Math.random() * 51)) + ‘,’ + (Math.floor(Math.random() * 153)) + 51′)’;
for example will always (I think) be a colour between #000033 and #3333CC
@Benjamin Sterling: Good point. Updated.
@James: Speed can be adjusted, so no worries there.
@Clinton Montague: This is a great consideration and one I looked at when developing. I decided to leave it out because it’s a “per site” issue.
Hi David.
Its is simply superb.
Great effect David! Thanks for sharing it with us.
Does anyone know of a way to make this compatible with IE 7 by chance?
@John Smith: Works for me!
Cheers David – figured out my issue – I just had a conflicting css definition that I somehow glazed over.
Hi, just suggestion: call
stop()on element before starting new animation:$(this).stop().animate({ ... });It will eliminate dancing menu item after multiple
mouseover/mouseout…Hi David, sorry this is such a backward question but can you tell me how I can use this code with my html. I don’t mean within my document, but referencing, say, a js file on my site to get this effect to take place?
Thanks a lot.
hello,
i’m wondering how it would be possible to limit the number of colors to a defined list. if i only want to have 7 set colors, how would i go about defining those 7 colors?
thanks in advance!
Well, this is just great!
I’m trying to figure out how to modify this so that every link on a page, when loaded, has a random background color. With a little padding on each link, it will look kind of lego-ish or block pixel-y or something, which would be rad. Any ideas?
Hi there,
unfortunately it does not work in combination with a slide out panel (based on jQ) in FF and Chrome. Does anybody know about that and is there anything I can do to make it work?????
Thanks in advance.
Hardy
Berlin, Germany
nice code man! thx for sharing
@theorie
you can use this:
colors =
[
“#37C78F”,
“#C9DE55”,
“#FF4D38”,
“#CC2249”,
“#380C2A”
]
var col = colors[Math.floor(Math.random()*colors.length)];
hi, i want to create a random spinning roulette or maybe something like a slot machine code, sp that the user will press “go” and the different options (which i’ll enter) will begin to spin and then stop on a random one. any help ?
Nice Work. But If we hover it fast over all the links. It is not working in the way that it pretend to be.
Thank you.. Great stuff..
Hi,
if I may, I’ve work on a plugin to do that : http://www.blog.kicoe.net/jquery/mon-premier-plugin-randomizecolor-pour-des-couleurs-aleatoires-au-survol-3599
Hope it’ll help
Nice Algorithm! I will use it on our page.