jQuery is great for adding enhancing effects that would otherwise be impossible with just HTML and CSS. In this tutorial we’re going to use jQuery and two plugins to gradually change a website’s background as the user scrolls the page.
We’ll be using the Color Animation and Waypoints plugins. The Color Animation plugin adds animations to the color properties of elements. jQuery already includes an animate function, this plugin simply extends it. The Waypoints plugin allows us to execute a function when a user scrolls past a certain element. I’m sure it’s obvious how these two plugins will help us achieve our goal.
First things first, let’s set up our project folder. Create index.html and style.css. Leave them in the root directory. Then, add a js folder. This is where we’ll put our JavaScript files.
We can grab the newest version of jQuery here and put it in the js folder. Next, create a script.js file in the js folder.
We’ll use script.js to add the Color Animation and Waypoints plugins. Get Color Animations from here and Waypoints from here. We can paste these two plugins directly into our script.js file.
The Markup
The HTML markup in this tutorial is going to be very simple. We’re just going to have a bunch of paragraphs and headings. The idea is to simulate a fairly long page so we’ll have a lot to scroll through.
Start by adding this code to index.html:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="container"> </div><!-- end container --> </body> </html>This gives us a nice basic structure to start from, but remember, we need to include our JavaScript files too. Before the closing head tag, add these two lines:
<script src="js/jquery-1.6.2.min.js"></script> <script src="js/script.js"></script>Inside the div with the class container add the following code:
<h1>A Story About Colors</h1> <h2 id="chapter1">In The Beginning, There Was Yellow</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit accum. Sed a ornare massa. Donec ac sapien a sem aliquet facilisis. Nulla vitae nunc tortor, at luctus risus. Integer viverra sapien a nibh condimentum sed luctus lorem interdum. Aliquam...
