SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple problem: jQuery color change with scrolling

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

    This is my html script:

    Code:
    <!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:

    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. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,244
    Mentioned
    155 Post(s)
    Tagged
    0 Thread(s)
    I'm not seeing where you included the jquery library, such as
    Code:
     <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
    Therefore you are likely getting JavaScript errors.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    I'm not seeing where you included the jquery library, such as
    Code:
     <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
    Therefore you are likely getting JavaScript errors.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
    		<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>
    	</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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there successfulfail,

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

    Code:
    <!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:

    Code:
    <!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. #5
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    You can copy and paste this and it'll run as expected.

    HTH
    Thank you. It works now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •