Metafizzy link color transitions

by Reusablecode

HTML

<p><a href="#">Ooooooooh yeah</a> lorem ipsum and something else <a href="#">Mmmmmmmm</a>. 'kay?</p>

CSS

body {
    background: black;
    color: white;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 40px;
    font-weight: bold;
}

.transitions-ready a {
  -webkit-transition: color 0.5s linear;
     -moz-transition: color 0.5s linear;
       -o-transition: color 0.5s linear;
          transition: color 0.5s linear;
}


.transitions-ready.color0 a  { color: hsl(  10, 90%, 60% ); }
.transitions-ready.color1 a  { color: hsl(  30, 90%, 60% ); }
.transitions-ready.color2 a  { color: hsl(  50, 90%, 60% ); }
.transitions-ready.color3 a  { color: hsl(  70, 90%, 60% ); }
.transitions-ready.color4 a  { color: hsl(  90, 90%, 60% ); }
.transitions-ready.color5 a  { color: hsl( 110, 90%, 60% ); }
.transitions-ready.color6 a  { color: hsl( 130, 90%, 60% ); }
.transitions-ready.color7 a  { color: hsl( 150, 90%, 60% ); }
.transitions-ready.color8 a  { color: hsl( 170, 90%, 60% ); }
.transitions-ready.color9 a  { color: hsl( 190, 90%, 60% ); }
.transitions-ready.color10 a { color: hsl( 210, 90%, 60% ); }
.transitions-ready.color11 a { color: hsl( 230, 90%, 60% ); }
.transitions-ready.color12 a { color: hsl( 250, 90%, 60% ); }
.transitions-ready.color13 a { color: hsl( 270, 90%, 60% ); }
.transitions-ready.color14 a { color: hsl( 290, 90%, 60% ); }
.transitions-ready.color15 a { color: hsl( 310, 90%, 60% ); }
.transitions-ready.color16 a { color: hsl( 330, 90%, 60% ); }
.transitions-ready.color17 a { color: hsl( 350, 90%, 60% ); }

JavaScript

$(function(){
   
    var t = 0,
        colorClass = 'color0',
        $body = $('body');
    
    // you should check for CSS transition support
    // with Modernizr, but for this demo, I'm faking it
    $body.addClass('transitions-ready');
    
    function changeColor() {
        t ++;
        $body.removeClass( colorClass );
        colorClass = 'color' + ( t % 18 );
        $body.addClass( colorClass );
        // wait a sec then do it again
        // time should match CSS transition duration value
        setTimeout( changeColor, 500 );
    }
    
    changeColor();
    
});