Proměnná el získá element <body>, proměnná length získá délku barevného pole (4) a proměnná height obsahuje zaokrouhlený výsledek výrazu: výška el. <body> / počtem barev (výška segmentu mezi 2 barvami)
Definujeme novou funkci scroll(). Proměnnou i představuje výsledek výrazu: vzdálenost, o kterou jsme sjeli dolů / height, a výsledek zaokrouhlí. Proměnná d představuje celočíselný zbytek po dělení: (vzdálenost o kterou jsme sjeli dolů/výška el. body) dělenou proměnnou height
function scroll() { var i = Math.floor(el.scrollTop / height), d = el.scrollTop % height / height,
Definuje počáteční a koncovou barvu. Proměnná c1 je počáteční barva a proměnná c2 je koncová barva (celočíselný zbytek po dělení výrazu i+1 proměnnou length).
c1 = colors[i], c2 = colors[(i + 1) % length],
Definuje proměnnou h (hodnota hue (odstín) v barevném formátu hsl). , prom. s (saturation), a prom. l (lightness)
h = c1[0] + Math.round((c2[0] - c1[0]) * d), s = c1[1] + Math.round((c2[1] - c1[1]) * d), l = c1[2] + Math.round((c2[2] - c1[2]) * d);
A nakonec nejdůležitější řádek. Z posledně definovaných proměnných sestaví hodnoty jenotlivých složek barvy (hsl) a výsledek sloučí metodou join().
A to je vše. Teď by to mělo fungovat. Postup s knihovnou jQuery je o hodně jednodušší, my ale můžeme být hodně pyšní na to že tvoříme jen v čistém JavaScriptu. Hodně štěstí!