A Pen by Mark Lee.

change-color-on-scroll.markdown

change color on scroll

A Pen by Mark Lee on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'>
<h1>change color on scroll</h1>

script.js

var $doc = $(document),
    $body = $('body'),
    y = $doc.scrollTop(),
    color1 = 0,
    color2 = 0;

$doc.on('scroll', function(){
  y = $doc.scrollTop();
  color1 = y/30;
  console.log(color1);
  color2 = color1 + 180;
  $body.css('background', 'hsla(' + color1 + ', 85%, 75%, 1)');
  $body.find('h1').css('color', 'hsla(' + color2 + ', 95%, 40%, 1)');
});

style.css

body{
  background: hsla(0, 85%, 75%, 1);
  min-height: 3000vh;
}
h1{
  font-family: 'Codystar', san-serif;
  font-size: 12vw;
  color: hsla(180, 95%, 40%, 1);
  text-align: center;
  position: fixed;
  width: 100vw;
}