0

I'm wanting to create an effect like the one on the following page http://readymag.com/ where the background color changes depending on the scroll position but have no idea how to go about it and I can't understand their code.

I've seen a few examples that change from 1 color to another but I'm unsure how to do it with multiple colors. (I would like to be able to specify each color)

Any help would be greatly appreciated.

Michael.

Michael Bole
  • 27
  • 2
  • 9
  • Do you understand `sin` and `cos`? Do you understand that a hexadecimal representation of a color is still just an integer? From these two concepts, you can rotate colors endlessly, at any step you choose. – crush May 30 '13 at 19:54
  • besides this is to help people with an specific problem, not to do their work.... – mercsen May 30 '13 at 20:01
  • I have asked no one to do any work, all i'm looking for is learning resources where I can achieve the desired effect as i'm a little lost, it's not much to ask for. – Michael Bole May 30 '13 at 20:22
  • an alternate [solution](http://stackoverflow.com/a/32805401/3711562) – Anantha Raju C Sep 27 '15 at 07:11

1 Answers1

2

Here is a simple way to do it:

HTML

<body onscroll="scroll()">
  ...
</body>

JavaScript

// HSL Colors
var colors = [
  [0, 100, 50],
  [113, 75, 25],
  [240, 87, 40],
  [328, 24, 40]
],

el = document.getElementsByTagName('body')[0],   // Element to be scrolled
length = colors.length,                          // Number of colors
height = Math.round(el.offsetHeight / length);   // Height of the segment between two colors

function scroll() {
  var i = Math.floor(el.scrollTop / height),     // Start color index
      d = el.scrollTop % height / height,        // Which part of the segment between start color and end color is passed
      c1 = colors[i],                            // Start color
      c2 = colors[(i+1)%length],                 // End color
      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);
  el.style['background-color'] = ['hsl(', h, ', ', s+'%, ', l, '%)'].join('');
}

Working example: http://jsbin.com/elolud/2/edit

Vadim
  • 8,701
  • 4
  • 43
  • 50
  • Thanks for getting back to me, Vadim. Nice approach though I've noticed this appears to be quite random, cycling through hue, any suggestions as to how I could gain more control over the colors? – Michael Bole May 30 '13 at 20:33
  • @MichaelBole I have updated post with script with the same approach that gives you control over colors as well – Vadim May 30 '13 at 21:28
  • Wow, that's perfect, thanks for the comments as well, helps me understand a lot better as i'm quite the novice! – Michael Bole May 30 '13 at 21:49
  • Getting a few issues when trying to implement. console shows: Uncaught TypeError: Cannot read property 'scrollTop' of undefined Uncaught TypeError: Cannot read property 'offsetHeight' of undefined – Michael Bole May 30 '13 at 22:13
  • seemed to be the order I called it I think, working great now. – Michael Bole May 30 '13 at 22:17