This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Animate Your Name Forum

View Course

2375 points
571828824b7f51f26c000619_875219903
Submitted by
Maciej Wiercioch
over 3 years ago

Any more tricks? Yes, color fading!

In How does alphabet.js work? I mentioned about one mysterious value of every point - the fourth value coresponding to hue of a color. But as I said there, this option was not used in our projects, but there is no reason we can't turn it on if we want to!

Function makeColor is responsible for making color (who would have guessed?) so let's look at it closer:

function makeColor(hslList, fade) {
    var hue = hslList[0] /*- 17.0 * fade / 1000.0*/;
    var sat = hslList[1] /*+ 81.0 * fade / 1000.0*/;
    var lgt = hslList[2] /*+ 58.0 * fade / 1000.0*/;
    return "hsl("+hue+","+sat+"%,"+lgt+"%)";
}

You probably noticed a few comments. We only have to uncomment the code and our animations will gain some depth!

function makeColor(hslList, fade) {
    var hue = hslList[0] - 17.0 * fade / 1000.0;
    var sat = hslList[1] + 81.0 * fade / 1000.0;
    var lgt = hslList[2] + 58.0 * fade / 1000.0;
    return "hsl("+hue+","+sat+"%,"+lgt+"%)";
}

An example of more colors, bigger dots, and fading!


Return to Frequently Asked Questions


0 votes

permalink

This is so cool! amazing! Thank you so much!!!!

388 points
571e6b5714f3ef31f900042b_234929580
Submitted by
cp99455
over 2 years ago

1 Comment

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 2 years ago

I am really happy that you like it! :)