Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body onscroll="scroll()">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam pellentesque nulla sit amet commodo. Pellentesque a metus vel velit cursus mollis. Quisque consectetur arcu eu augue mollis eget laoreet felis iaculis. Cras facilisis mollis purus sit amet tincidunt. Praesent ultricies nisl vel erat hendrerit at euismod libero fermentum. Morbi eget est sit amet lectus suscipit tempus vel vel massa. Nunc velit neque, imperdiet eu consectetur eget, viverra eu massa. Ut elit risus, tristique ut feugiat id, lobortis sit amet diam.
  </p><p>
Fusce pharetra ornare massa a pellentesque. Nam vulputate pellentesque sapien id congue. Nunc a dolor vitae ipsum rhoncus vulputate sit amet ut ligula. Nulla ac nunc a nulla egestas porttitor. Aliquam erat volutpat. Aliquam ornare, augue non vestibulum dictum, massa sapien dictum libero, consequat ultricies velit lorem ut orci. Quisque augue enim, egestas sit amet cursus a, sodales vitae sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id eros tortor. Donec euismod vestibulum interdum. Sed quis tortor at turpis ullamcorper rhoncus eu et odio.
</p><p>
Proin hendrerit risus eget felis luctus convallis. Suspendisse rhoncus interdum diam nec aliquam. In ut urna arcu, ac vulputate purus. Suspendisse non magna massa. Proin tincidunt, quam id varius ornare, nulla purus sollicitudin erat, mollis ultrices purus nisl vel augue. Cras convallis, mi eu vulputate mollis, ante risus molestie tortor, in aliquam libero purus quis nunc. Aenean imperdiet fringilla ligula, id aliquam nulla auctor et. Sed at ipsum orci. Vestibulum convallis tincidunt tellus, lacinia vehicula neque scelerisque eleifend. Vestibulum vitae leo nibh. Quisque id tortor id arcu malesuada sagittis. Suspendisse vitae congue nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam varius vulputate neque quis convallis. Vestibulum dapibus tincidunt purus ut sodales.
</p><p>
Nulla dignissim ullamcorper faucibus. Donec vitae mi leo, in molestie libero. In condimentum elit sed sapien lacinia eget tempus neque vulputate. In vel accumsan nunc. Curabitur eget lacus felis, eu consectetur orci. Etiam quis justo diam, in volutpat urna. Proin condimentum semper molestie. Curabitur blandit malesuada sem, et laoreet dui consectetur sed. Proin rutrum neque ac eros luctus pharetra. In lobortis lacinia elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut a nulla quam, sit amet tincidunt ante.
</p><p>
Integer ut velit massa. Aenean sed neque in elit cursus porttitor sed sodales tellus. Quisque vehicula urna a magna ullamcorper eleifend. Nam nisl dui, posuere et rhoncus id, semper et lectus. Duis luctus dui nec orci interdum imperdiet. Morbi sit amet orci est, eu condimentum ante. Nam eget metus justo, id rhoncus elit. Quisque dignissim dignissim tellus, vel blandit risus mollis eu. Praesent sit amet tellus nec urna imperdiet imperdiet congue sed augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur fringilla tincidunt libero, ut laoreet quam feugiat quis. Phasellus laoreet bibendum magna nec imperdiet. Curabitur sit amet augue et dolor interdum luctus. Duis luctus mi vitae erat scelerisque facilisis. Maecenas viverra fermentum purus nec vehicula.
</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam pellentesque nulla sit amet commodo. Pellentesque a metus vel velit cursus mollis. Quisque consectetur arcu eu augue mollis eget laoreet felis iaculis. Cras facilisis mollis purus sit amet tincidunt. Praesent ultricies nisl vel erat hendrerit at euismod libero fermentum. Morbi eget est sit amet lectus suscipit tempus vel vel massa. Nunc velit neque, imperdiet eu consectetur eget, viverra eu massa. Ut elit risus, tristique ut feugiat id, lobortis sit amet diam.
</p><p>
Fusce pharetra ornare massa a pellentesque. Nam vulputate pellentesque sapien id congue. Nunc a dolor vitae ipsum rhoncus vulputate sit amet ut ligula. Nulla ac nunc a nulla egestas porttitor. Aliquam erat volutpat. Aliquam ornare, augue non vestibulum dictum, massa sapien dictum libero, consequat ultricies velit lorem ut orci. Quisque augue enim, egestas sit amet cursus a, sodales vitae sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id eros tortor. Donec euismod vestibulum interdum. Sed quis tortor at turpis ullamcorper rhoncus eu et odio.
</p><p>
Proin hendrerit risus eget felis luctus convallis. Suspendisse rhoncus interdum diam nec aliquam. In ut urna arcu, ac vulputate purus. Suspendisse non magna massa. Proin tincidunt, quam id varius ornare, nulla purus sollicitudin erat, mollis ultrices purus nisl vel augue. Cras convallis, mi eu vulputate mollis, ante risus molestie tortor, in aliquam libero purus quis nunc. Aenean imperdiet fringilla ligula, id aliquam nulla auctor et. Sed at ipsum orci. Vestibulum convallis tincidunt tellus, lacinia vehicula neque scelerisque eleifend. Vestibulum vitae leo nibh. Quisque id tortor id arcu malesuada sagittis. Suspendisse vitae congue nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam varius vulputate neque quis convallis. Vestibulum dapibus tincidunt purus ut sodales.
</p><p>
Nulla dignissim ullamcorper faucibus. Donec vitae mi leo, in molestie libero. In condimentum elit sed sapien lacinia eget tempus neque vulputate. In vel accumsan nunc. Curabitur eget lacus felis, eu consectetur orci. Etiam quis justo diam, in volutpat urna. Proin condimentum semper molestie. Curabitur blandit malesuada sem, et laoreet dui consectetur sed. Proin rutrum neque ac eros luctus pharetra. In lobortis lacinia elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut a nulla quam, sit amet tincidunt ante.
</p><p>
Integer ut velit massa. Aenean sed neque in elit cursus porttitor sed sodales tellus. Quisque vehicula urna a magna ullamcorper eleifend. Nam nisl dui, posuere et rhoncus id, semper et lectus. Duis luctus dui nec orci interdum imperdiet. Morbi sit amet orci est, eu condimentum ante. Nam eget metus justo, id rhoncus elit. Quisque dignissim dignissim tellus, vel blandit risus mollis eu. Praesent sit amet tellus nec urna imperdiet imperdiet congue sed augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur fringilla tincidunt libero, ut laoreet quam feugiat quis. Phasellus laoreet bibendum magna nec imperdiet. Curabitur sit amet augue et dolor interdum luctus. Duis luctus mi vitae erat scelerisque facilisis. Maecenas viverra fermentum purus nec vehicula.
</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam pellentesque nulla sit amet commodo. Pellentesque a metus vel velit cursus mollis. Quisque consectetur arcu eu augue mollis eget laoreet felis iaculis. Cras facilisis mollis purus sit amet tincidunt. Praesent ultricies nisl vel erat hendrerit at euismod libero fermentum. Morbi eget est sit amet lectus suscipit tempus vel vel massa. Nunc velit neque, imperdiet eu consectetur eget, viverra eu massa. Ut elit risus, tristique ut feugiat id, lobortis sit amet diam.
</p><p>
Fusce pharetra ornare massa a pellentesque. Nam vulputate pellentesque sapien id congue. Nunc a dolor vitae ipsum rhoncus vulputate sit amet ut ligula. Nulla ac nunc a nulla egestas porttitor. Aliquam erat volutpat. Aliquam ornare, augue non vestibulum dictum, massa sapien dictum libero, consequat ultricies velit lorem ut orci. Quisque augue enim, egestas sit amet cursus a, sodales vitae sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id eros tortor. Donec euismod vestibulum interdum. Sed quis tortor at turpis ullamcorper rhoncus eu et odio.
</p><p>
Proin hendrerit risus eget felis luctus convallis. Suspendisse rhoncus interdum diam nec aliquam. In ut urna arcu, ac vulputate purus. Suspendisse non magna massa. Proin tincidunt, quam id varius ornare, nulla purus sollicitudin erat, mollis ultrices purus nisl vel augue. Cras convallis, mi eu vulputate mollis, ante risus molestie tortor, in aliquam libero purus quis nunc. Aenean imperdiet fringilla ligula, id aliquam nulla auctor et. Sed at ipsum orci. Vestibulum convallis tincidunt tellus, lacinia vehicula neque scelerisque eleifend. Vestibulum vitae leo nibh. Quisque id tortor id arcu malesuada sagittis. Suspendisse vitae congue nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam varius vulputate neque quis convallis. Vestibulum dapibus tincidunt purus ut sodales.
</p><p>
Nulla dignissim ullamcorper faucibus. Donec vitae mi leo, in molestie libero. In condimentum elit sed sapien lacinia eget tempus neque vulputate. In vel accumsan nunc. Curabitur eget lacus felis, eu consectetur orci. Etiam quis justo diam, in volutpat urna. Proin condimentum semper molestie. Curabitur blandit malesuada sem, et laoreet dui consectetur sed. Proin rutrum neque ac eros luctus pharetra. In lobortis lacinia elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut a nulla quam, sit amet tincidunt ante.
</p><p>
Integer ut velit massa. Aenean sed neque in elit cursus porttitor sed sodales tellus. Quisque vehicula urna a magna ullamcorper eleifend. Nam nisl dui, posuere et rhoncus id, semper et lectus. Duis luctus dui nec orci interdum imperdiet. Morbi sit amet orci est, eu condimentum ante. Nam eget metus justo, id rhoncus elit. Quisque dignissim dignissim tellus, vel blandit risus mollis eu. Praesent sit amet tellus nec urna imperdiet imperdiet congue sed augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur fringilla tincidunt libero, ut laoreet quam feugiat quis. Phasellus laoreet bibendum magna nec imperdiet. Curabitur sit amet augue et dolor interdum luctus. Duis luctus mi vitae erat scelerisque facilisis. Maecenas viverra fermentum purus nec vehicula.
  </p>
</body>
</html>
 
// 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('');
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers