Scroll-triggered Color Transition Effect With jQuery

Scrolling background color

Change the background color on scrolling

Usage

1. Include jQuery & $.Color:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.jquery.com/color/jquery.color-2.1.0.js"></script>

2. Include plugin's code:

   <script src="dist/jquery.scrolling-background-color.js"></script>

3. Call the plugin:

   $(window).scrollingBackgroundColor(); // for the entire page background 	// or $('#element').scrollingBackgroundColor(); // for the background of #element

4. Options:

   $( "#element" ).scrollingBackgroundColor( { 	from: "#CCCCCC", // startcolor 	to: "#FFFFFF", //tocolor 	target: 'body', // container changing color  	watch : '#element' // on scrolling } );

Demo

You will find a demo file on demo/index.html or live http://moshifr.github.io/scrolling-background-color/

Structure

The basic structure of the project is given in the following way:

├── demo/ │   └── index.html ├── dist/ │   ├── jquery.scrolling-background-color.js │   └── jquery.scrolling-background-color.min.js ├── .editorconfig ├── .gitignore ├── .jshintrc ├── .travis.yml ├── Gruntfile.js └── package.json