Simple problem: jQuery color change with scrolling

JavaScript
1

I have found a way to scroll and change the website background color from here

This is my html script:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

		<script scr="scroll.js"></script>
		<script scr="jquery.color-2.1.0.js"></script>
	</head>
	<body>
		<h>hello</h>
	</body>

	<style type="text/css">
		body {
			background-color: rgb(210,50,98);
			min-height: 4000px;
		}
	</style>
</html>

scroll.js code:

$(document).ready(function(){ 
    //** notice we are including jquery and the color plugin at 
    //** http://code.jquery.com/color/jquery.color-2.1.0.js
    
    var scroll_pos = 0;
    var animation_begin_pos = 0; //where you want the animation to begin
    var animation_end_pos = 1000; //where you want the animation to stop
    var beginning_color = new $.Color( 'rgb(210,50,98)' ); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here.
    var ending_color = new $.Color( 'rgb(0,197,209)' ); ;//what color we want to use in the end
    $(document).scroll(function() {
        scroll_pos = $(this).scrollTop(); 
        if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) { 
           // console.log( 'scrolling and animating' );
            //we want to calculate the relevant transitional rgb value
            var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
            var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
            var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
            var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
            var newColor = new $.Color( newRed, newGreen, newBlue );
            //console.log( newColor.red(), newColor.green(), newColor.blue() );
            $('body').animate({ backgroundColor: newColor }, 0);
        } else if ( scroll_pos > animation_end_pos ) {
             $('body').animate({ backgroundColor: ending_color }, 0);
        } else if ( scroll_pos < animation_begin_pos ) {
             $('body').animate({ backgroundColor: beginning_color }, 0);
        } else { }
    });
});

I’m not sure why it is not working. (I am just opening this in a Chrome browser.)

2

I’m not seeing where you included the jquery library, such as

 <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>

Therefore you are likely getting JavaScript errors.

3 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

		[COLOR="#FF0000"]<script type="text/javascript" scr="scroll.js"></script>
		<script type="text/javascript" scr="jquery.color-2.1.0.js"></script>
		<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.js"></script>[/COLOR]
	</head>
	<body>
		<h>hello</h>
	</body>

	<style type="text/css">
		body {
			background-color: rgb(210,50,98);
			min-height: 4000px;
		}
	</style>
</html>

I have made changes to the html code but it still does not work for some reason…

4

Hi there successfulfail,

There are a couple of errors in the code you provide.
Let’s start with the HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      body {
        background-color: rgb(210,50,98);
        min-height: 4000px;
      }
    </style>
  </head>

  <body>
    <h1>hello</h1>

  </body>
</html>

Notice that the styles should go in the head of the document.
There is also no such thing as a <h> tag. This should be <h1>

Now let’s include the scripts.
In the code you posted you had written scr=“…” this should be src=“…”

It’s also important to include the scripts in the right order:
jQuery library
jQuery color plugin
scroll.js

and in the right place, which is just before the closing body tag.
If you do this, you can also do without the $(document).ready() callback.

This gives you:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      body {
        background-color: rgb(210,50,98);
        min-height: 4000px;
      }
    </style>
  </head>

  <body>
    <h1>hello</h1>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/color/jquery.color-2.1.0.js"></script>
    <script>
      var scroll_pos = 0;
      var animation_begin_pos = 0; //where you want the animation to begin
      var animation_end_pos = 1000; //where you want the animation to stop
      var beginning_color = new $.Color( 'rgb(210,50,98)' ); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here.
      var ending_color = new $.Color( 'rgb(0,197,209)' ); ;//what color we want to use in the end
      $(document).scroll(function() {
          scroll_pos = $(this).scrollTop(); 
          if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) { 
             // console.log( 'scrolling and animating' );
              //we want to calculate the relevant transitional rgb value
              var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
              var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
              var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
              var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
              var newColor = new $.Color( newRed, newGreen, newBlue );
              //console.log( newColor.red(), newColor.green(), newColor.blue() );
              $('body').animate({ backgroundColor: newColor }, 0);
          } else if ( scroll_pos > animation_end_pos ) {
               $('body').animate({ backgroundColor: ending_color }, 0);
          } else if ( scroll_pos < animation_begin_pos ) {
               $('body').animate({ backgroundColor: beginning_color }, 0);
          } else { }
      });
    </script>
  </body>
</html>

You can copy and paste this and it’ll run as expected.

HTH

5

Thank you. It works now.