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 eu convallis tellus. Aliquam commodo diam in tortor sagittis nec interdum lacus condimentum. Vestibulum lacus odio, scelerisque porttitor vulputate ac, fermentum luctus enim. Nulla facilisi. Ut eget eros metus, nec dapibus arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur eros felis, egestas a tincidunt nec, venenatis quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed quis lectus vel libero feugiat laoreet vitae et elit. Nam id erat et odio ultrices vulputate. In lobortis dapibus mauris, nec faucibus ligula interdum vel. Vivamus dictum urna urna, rutrum iaculis orci.</p>
<p>Quisque vestibulum sollicitudin diam, in aliquet lectus tempus at. Donec sollicitudin adipiscing velit non placerat. Integer sagittis quam fermentum massa euismod sed feugiat nulla egestas. Maecenas dapibus purus et urna malesuada nec hendrerit mi hendrerit. Morbi dapibus tempus dictum. Vestibulum sed enim nibh. Nunc sodales arcu a nisi faucibus sit amet pretium ante accumsan. Phasellus eu ligula sem. Sed nec sapien ac urna semper pulvinar nec eu est. Nunc commodo sem vel velit accumsan laoreet.</p>
<p>Donec mollis, erat id tempor dapibus, risus ipsum iaculis dolor, vitae mollis sapien justo id lorem. In lacinia luctus velit nec pharetra. Ut volutpat volutpat felis nec tincidunt. Duis a erat nec lorem pellentesque faucibus quis vel mauris. Phasellus feugiat ultrices dui, nec ultricies nibh fringilla a. Curabitur lacinia metus sit amet mi consectetur posuere imperdiet elit aliquam. Ut adipiscing aliquam tortor non feugiat. Quisque non arcu nec dui pellentesque sodales. Donec varius faucibus aliquam. Vestibulum vitae fermentum arcu. Pellentesque ornare odio id magna accumsan id consectetur risus suscipit. Nunc sapien erat, blandit quis accumsan et, luctus at metus. Mauris fermentum, elit lobortis ullamcorper commodo, arcu lectus fringilla orci, sit amet fermentum nibh odio eu libero. Sed pretium lacinia nisl, et consectetur nulla congue eu. Pellentesque elit neque, molestie et pretium vitae, congue sit amet quam. In non enim urna, id blandit metus.</p>
<h2 id="chapter2">Then, Came Blue</h2>
<p>Quisque vestibulum sollicitudin diam, in aliquet lectus tempus at. Donec sollicitudin adipiscing velit non placerat. Integer sagittis quam fermentum massa euismod sed feugiat nulla egestas. Maecenas dapibus purus et urna malesuada nec hendrerit mi hendrerit. Morbi dapibus tempus dictum. Vestibulum sed enim nibh. Nunc sodales arcu a nisi faucibus sit amet pretium ante accumsan. Phasellus eu ligula sem. Sed nec sapien ac urna semper pulvinar nec eu est. Nunc commodo sem vel velit accumsan laoreet.</p>
<p>Donec mollis, erat id tempor dapibus, risus ipsum iaculis dolor, vitae mollis sapien justo id lorem. In lacinia luctus velit nec pharetra. Ut volutpat volutpat felis nec tincidunt. Duis a erat nec lorem pellentesque faucibus quis vel mauris. Phasellus feugiat ultrices dui, nec ultricies nibh fringilla a. Curabitur lacinia metus sit amet mi consectetur posuere imperdiet elit aliquam. Ut adipiscing aliquam tortor non feugiat. Quisque non arcu nec dui pellentesque sodales. Donec varius faucibus aliquam. Vestibulum vitae fermentum arcu. Pellentesque ornare odio id magna accumsan id consectetur risus suscipit. Nunc sapien erat, blandit quis accumsan et, luctus at metus. Mauris fermentum, elit lobortis ullamcorper commodo, arcu lectus fringilla orci, sit amet fermentum nibh odio eu libero. Sed pretium lacinia nisl, et consectetur nulla congue eu. Pellentesque elit neque, molestie et pretium vitae, congue sit amet quam. In non enim urna, id blandit metus.</p>
<h2 id="chapter3">An Evil Red Spread Across The Land</h2>
<p>In quis magna arcu. Ut euismod felis ut nulla pulvinar eu porta sapien cursus. Morbi feugiat nisl in sapien rutrum nec faucibus diam auctor. Duis auctor tincidunt ultricies. Phasellus ut urna vel leo cursus pellentesque non vitae tortor. Vivamus sed luctus purus. Maecenas non fringilla felis. Curabitur nisl augue, accumsan vel congue nec, mattis vel nunc. Nam erat purus, egestas auctor dapibus eu, dictum a leo. Sed aliquam risus vitae libero consequat suscipit. Suspendisse vestibulum congue lacus, nec commodo mi ornare sit amet. Integer lobortis sapien at erat pellentesque tempor. Sed sem est, ultrices in blandit id, dignissim eu metus. Duis fermentum risus a quam imperdiet blandit pretium felis pulvinar. Donec venenatis euismod eros ut faucibus. Cras purus elit, tincidunt ut porta a, auctor et nisi. Morbi feugiat hendrerit sem, in gravida magna blandit sit amet. Curabitur sodales sodales enim non elementum. Ut auctor sollicitudin dolor non congue. Nunc vel nunc mauris.</p>
<p>In eros libero, ullamcorper in feugiat id, elementum et dui. Sed tempus ullamcorper posuere. Pellentesque facilisis tincidunt porttitor. Donec accumsan ligula in felis scelerisque a molestie ipsum molestie. Mauris vel tempor mi. Sed tempor, ante in rutrum porta, erat sapien elementum metus, at ornare augue magna quis est. Maecenas dictum ante eget arcu viverra ut egestas sem ultrices. Nulla ullamcorper orci eget diam sodales auctor. Etiam accumsan magna sit amet leo vestibulum id molestie dui suscipit. Vestibulum iaculis, neque in pulvinar volutpat, eros orci accumsan justo, eu consectetur arcu orci vitae tellus. Quisque et tortor eu risus faucibus convallis non nec erat. Nulla rutrum turpis et dui tincidunt porttitor. Nulla nec mauris nunc, et pulvinar enim. Nulla facilisi. Suspendisse vitae augue odio. Aliquam luctus adipiscing velit, ac dapibus libero ornare luctus. In hac habitasse platea dictumst. Duis aliquet suscipit congue.</p>
<h2 id="chapter4">A Shady Purple Stalked The Night</h2>
<p>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 eu convallis tellus. Aliquam commodo diam in tortor sagittis nec interdum lacus condimentum. Vestibulum lacus odio, scelerisque porttitor vulputate ac, fermentum luctus enim. Nulla facilisi. Ut eget eros metus, nec dapibus arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur eros felis, egestas a tincidunt nec, venenatis quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed quis lectus vel libero feugiat laoreet vitae et elit. Nam id erat et odio ultrices vulputate. In lobortis dapibus mauris, nec faucibus ligula interdum vel. Vivamus dictum urna urna, rutrum iaculis orci.</p>
<p>Quisque vestibulum sollicitudin diam, in aliquet lectus tempus at. Donec sollicitudin adipiscing velit non placerat. Integer sagittis quam fermentum massa euismod sed feugiat nulla egestas. Maecenas dapibus purus et urna malesuada nec hendrerit mi hendrerit. Morbi dapibus tempus dictum. Vestibulum sed enim nibh. Nunc sodales arcu a nisi faucibus sit amet pretium ante accumsan. Phasellus eu ligula sem. Sed nec sapien ac urna semper pulvinar nec eu est. Nunc commodo sem vel velit accumsan laoreet.</p>
<h2 id="chapter5">The Forest Stayed Forever Green</h2>
<p>In eros libero, ullamcorper in feugiat id, elementum et dui. Sed tempus ullamcorper posuere. Pellentesque facilisis tincidunt porttitor. Donec accumsan ligula in felis scelerisque a molestie ipsum molestie. Mauris vel tempor mi. Sed tempor, ante in rutrum porta, erat sapien elementum metus, at ornare augue magna quis est. Maecenas dictum ante eget arcu viverra ut egestas sem ultrices. Nulla ullamcorper orci eget diam sodales auctor. Etiam accumsan magna sit amet leo vestibulum id molestie dui suscipit. Vestibulum iaculis, neque in pulvinar volutpat, eros orci accumsan justo, eu consectetur arcu orci vitae tellus. Quisque et tortor eu risus faucibus convallis non nec erat. Nulla rutrum turpis et dui tincidunt porttitor. Nulla nec mauris nunc, et pulvinar enim. Nulla facilisi. Suspendisse vitae augue odio. Aliquam luctus adipiscing velit, ac dapibus libero ornare luctus. In hac habitasse platea dictumst. Duis aliquet suscipit congue.</p>The above is just a lot of text wrapped in paragraph and heading tags. Let’s imagine it’s a story that our users will be reading. Notice that each h2 has been given a chapter name for the id. Later, we’ll use these ids to detect when a user has scrolled passed the corresponding h2.
Note: I write the cheesiest filler text. You don’t have to stoop to my level.
That’s it for the markup. Our index.html file should now look like this:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="container">
<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 eu convallis tellus. Aliquam commodo diam in tortor sagittis nec interdum lacus condimentum. Vestibulum lacus odio, scelerisque porttitor vulputate ac, fermentum luctus enim. Nulla facilisi. Ut eget eros metus, nec dapibus arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur eros felis, egestas a tincidunt nec, venenatis quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed quis lectus vel libero feugiat laoreet vitae et elit. Nam id erat et odio ultrices vulputate. In lobortis dapibus mauris, nec faucibus ligula interdum vel. Vivamus dictum urna urna, rutrum iaculis orci.</p>
<p>Quisque vestibulum sollicitudin diam, in aliquet lectus tempus at. Donec sollicitudin adipiscing velit non placerat. Integer sagittis quam fermentum massa euismod sed feugiat nulla egestas. Maecenas dapibus purus et urna malesuada nec hendrerit mi hendrerit. Morbi dapibus tempus dictum. Vestibulum sed enim nibh. Nunc sodales arcu a nisi faucibus sit amet pretium ante accumsan. Phasellus eu ligula sem. Sed nec sapien ac urna semper pulvinar nec eu est. Nunc commodo sem vel velit accumsan laoreet.</p>
<p>Donec mollis, erat id tempor dapibus, risus ipsum iaculis dolor, vitae mollis sapien justo id lorem. In lacinia luctus velit nec pharetra. Ut volutpat volutpat felis nec tincidunt. Duis a erat nec lorem pellentesque faucibus quis vel mauris. Phasellus feugiat ultrices dui, nec ultricies nibh fringilla a. Curabitur lacinia metus sit amet mi consectetur posuere imperdiet elit aliquam. Ut adipiscing aliquam tortor non feugiat. Quisque non arcu nec dui pellentesque sodales. Donec varius faucibus aliquam. Vestibulum vitae fermentum arcu. Pellentesque ornare odio id magna accumsan id consectetur risus suscipit. Nunc sapien erat, blandit quis accumsan et, luctus at metus. Mauris fermentum, elit lobortis ullamcorper commodo, arcu lectus fringilla orci, sit amet fermentum nibh odio eu libero. Sed pretium lacinia nisl, et consectetur nulla congue eu. Pellentesque elit neque, molestie et pretium vitae, congue sit amet quam. In non enim urna, id blandit metus.</p>
<h2 id="chapter2">Then, Came Blue</h2>
<p>Quisque vestibulum sollicitudin diam, in aliquet lectus tempus at. Donec sollicitudin adipiscing velit non placerat. Integer sagittis quam fermentum massa euismod sed feugiat nulla egestas. Maecenas dapibus purus et urna malesuada nec hendrerit mi hendrerit. Morbi dapibus tempus dictum. Vestibulum sed enim nibh. Nunc sodales arcu a nisi faucibus sit amet pretium ante accumsan. Phasellus eu ligula sem. Sed nec sapien ac urna semper pulvinar nec eu est. Nunc commodo sem vel velit accumsan laoreet.</p>
<p>Donec mollis, erat id tempor dapibus, risus ipsum iaculis dolor, vitae mollis sapien justo id lorem. In lacinia luctus velit nec pharetra. Ut volutpat volutpat felis nec tincidunt. Duis a erat nec lorem pellentesque faucibus quis vel mauris. Phasellus feugiat ultrices dui, nec ultricies nibh fringilla a. Curabitur lacinia metus sit amet mi consectetur posuere imperdiet elit aliquam. Ut adipiscing aliquam tortor non feugiat. Quisque non arcu nec dui pellentesque sodales. Donec varius faucibus aliquam. Vestibulum vitae fermentum arcu. Pellentesque ornare odio id magna accumsan id consectetur risus suscipit. Nunc sapien erat, blandit quis accumsan et, luctus at metus. Mauris fermentum, elit lobortis ullamcorper commodo, arcu lectus fringilla orci, sit amet fermentum nibh odio eu libero. Sed pretium lacinia nisl, et consectetur nulla congue eu. Pellentesque elit neque, molestie et pretium vitae, congue sit amet quam. In non enim urna, id blandit metus.</p>
<h2 id="chapter3">An Evil Red Spread Across The Land</h2>
<p>In quis magna arcu. Ut euismod felis ut nulla pulvinar eu porta sapien cursus. Morbi feugiat nisl in sapien rutrum nec faucibus diam auctor. Duis auctor tincidunt ultricies. Phasellus ut urna vel leo cursus pellentesque non vitae tortor. Vivamus sed luctus purus. Maecenas non fringilla felis. Curabitur nisl augue, accumsan vel congue nec, mattis vel nunc. Nam erat purus, egestas auctor dapibus eu, dictum a leo. Sed aliquam risus vitae libero consequat suscipit. Suspendisse vestibulum congue lacus, nec commodo mi ornare sit amet. Integer lobortis sapien at erat pellentesque tempor. Sed sem est, ultrices in blandit id, dignissim eu metus. Duis fermentum risus a quam imperdiet blandit pretium felis pulvinar. Donec venenatis euismod eros ut faucibus. Cras purus elit, tincidunt ut porta a, auctor et nisi. Morbi feugiat hendrerit sem, in gravida magna blandit sit amet. Curabitur sodales sodales enim non elementum. Ut auctor sollicitudin dolor non congue. Nunc vel nunc mauris.</p>
<p>In eros libero, ullamcorper in feugiat id, elementum et dui. Sed tempus ullamcorper posuere. Pellentesque facilisis tincidunt porttitor. Donec accumsan ligula in felis scelerisque a molestie ipsum molestie. Mauris vel tempor mi. Sed tempor, ante in rutrum porta, erat sapien elementum metus, at ornare augue magna quis est. Maecenas dictum ante eget arcu viverra ut egestas sem ultrices. Nulla ullamcorper orci eget diam sodales auctor. Etiam accumsan magna sit amet leo vestibulum id molestie dui suscipit. Vestibulum iaculis, neque in pulvinar volutpat, eros orci accumsan justo, eu consectetur arcu orci vitae tellus. Quisque et tortor eu risus faucibus convallis non nec erat. Nulla rutrum turpis et dui tincidunt porttitor. Nulla nec mauris nunc, et pulvinar enim. Nulla facilisi. Suspendisse vitae augue odio. Aliquam luctus adipiscing velit, ac dapibus libero ornare luctus. In hac habitasse platea dictumst. Duis aliquet suscipit congue.</p>
<h2 id="chapter4">A Shady Purple Stalked The Night</h2>
<p>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 eu convallis tellus. Aliquam commodo diam in tortor sagittis nec interdum lacus condimentum. Vestibulum lacus odio, scelerisque porttitor vulputate ac, fermentum luctus enim. Nulla facilisi. Ut eget eros metus, nec dapibus arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur eros felis, egestas a tincidunt nec, venenatis quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed quis lectus vel libero feugiat laoreet vitae et elit. Nam id erat et odio ultrices vulputate. In lobortis dapibus mauris, nec faucibus ligula interdum vel. Vivamus dictum urna urna, rutrum iaculis orci.</p>
<p>Quisque vestibulum sollicitudin diam, in aliquet lectus tempus at. Donec sollicitudin adipiscing velit non placerat. Integer sagittis quam fermentum massa euismod sed feugiat nulla egestas. Maecenas dapibus purus et urna malesuada nec hendrerit mi hendrerit. Morbi dapibus tempus dictum. Vestibulum sed enim nibh. Nunc sodales arcu a nisi faucibus sit amet pretium ante accumsan. Phasellus eu ligula sem. Sed nec sapien ac urna semper pulvinar nec eu est. Nunc commodo sem vel velit accumsan laoreet.</p>
<h2 id="chapter5">The Forest Stayed Forever Green</h2>
<p>In eros libero, ullamcorper in feugiat id, elementum et dui. Sed tempus ullamcorper posuere. Pellentesque facilisis tincidunt porttitor. Donec accumsan ligula in felis scelerisque a molestie ipsum molestie. Mauris vel tempor mi. Sed tempor, ante in rutrum porta, erat sapien elementum metus, at ornare augue magna quis est. Maecenas dictum ante eget arcu viverra ut egestas sem ultrices. Nulla ullamcorper orci eget diam sodales auctor. Etiam accumsan magna sit amet leo vestibulum id molestie dui suscipit. Vestibulum iaculis, neque in pulvinar volutpat, eros orci accumsan justo, eu consectetur arcu orci vitae tellus. Quisque et tortor eu risus faucibus convallis non nec erat. Nulla rutrum turpis et dui tincidunt porttitor. Nulla nec mauris nunc, et pulvinar enim. Nulla facilisi. Suspendisse vitae augue odio. Aliquam luctus adipiscing velit, ac dapibus libero ornare luctus. In hac habitasse platea dictumst. Duis aliquet suscipit congue.</p>
</div><!-- end container -->
</body>
</html>If your preview the file in a browser, you’ll see just a plain white background.
The Styles
The CSS for this project is also going to be very simple. We’re just going to center the text and add some typographic styles. Start by adding some reset code to style.css:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}A CSS “reset” zeros out the default settings for HTML elements. This helps to make sure that different browsers display things the same way.
Note: For some more information on CSS resets read this and this.
Now, let’s style the body element with some basic type settings and a background color:
body {
font-family: sans-serif;
font-size: 20px;
line-height: 1.6em;
background-color: rgba(240,255,0,0.5);
}Notice the RGBA color value. The first three numbers are red, green, and blue, respectively, the final value sets the opacity between 0 and 1. This allows us to use transparency on our colors. Safari, Chrome, and Firefox (3.0+) all support this. Internet Explorer 8 and below do not. Make sure to provide fallbacks if you’re going to use RGBA in a production environment. For our little project, we don’t have to worry.
Next, we’ll style the container to center our text and add some padding to the bottom of the page:
.container {
width: 600px;
margin: 0 auto;
padding-bottom: 128px;
}Finally, we’ll add some more font styles to our heading and paragraph elements and a bit of spacing:
h1, h2 {
font-family: Georgia, serif;
text-align: center;
font-weight: bold;
margin: 64px 0 32px 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
font-weight: bold;
}
p {
margin-bottom: 32px;
}That’s all the styling we’ll be doing. Our style.css should now look like this:
/* Reset Styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Main Styles */
body {
font-family: sans-serif;
font-size: 20px;
line-height: 1.6em;
background-color: rgba(240,255,0,0.5);
}
.container {
width: 600px;
margin: 0 auto;
padding-bottom: 128px;
}
h1, h2 {
font-family: Georgia, serif;
text-align: center;
font-weight: bold;
margin: 64px 0 32px 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
font-weight: bold;
}
p {
margin-bottom: 32px;
}If you preview index.html in a browser, you should see this:
The Script
Alright, now let’s get to the jQuery. Open up script.js and scroll below the plugins we pasted in earlier. Add the following code:
$(document).ready(function() {
$("#chapter2").waypoint(function(event, direction) {
if (direction === 'down') {
$("body").animate({backgroundColor: 'rgba(25,148,255,0.5)'},5000)
}
else {
$("body").animate({backgroundColor: 'rgba(240,255,0,0.5)'},5000)
}
});
});This script tells the browser, “As soon as the DOM is registered, and once a user has scrolled down past the chapter2 element, animate the background color of body to become blue over a period of 5 seconds. If the user scrolls up past chapter2, animate the background color of body to become yellow over a period of 5 seconds.”
Note: The final value of the animate function is the timer. We’ve set it for 5000 milliseconds, which means our animation will occur over 5 seconds.
Let’s add similar instructions for every “chapter.” Instead of blue, we’ll have the body change to red, purple, and then green. Remember to use the previous color for the else statement, as this is executed when the user scrolls back up.
$("#chapter3").waypoint(function(event, direction) {
if (direction === 'down') {
$("body").animate({backgroundColor: 'rgba(255,0,0,0.5)'},5000)
}
else {
$("body").animate({backgroundColor: 'rgba(25,148,255,0.5)'},5000)
}
});
$("#chapter4").waypoint(function(event, direction) {
if (direction === 'down') {
$("body").animate({backgroundColor: 'rgba(96,0,179,0.5)'},5000)
}
else {
$("body").animate({backgroundColor: 'rgba(255,0,0,0.5)'},5000)
}
});
$("#chapter5").waypoint(function(event, direction) {
if (direction === 'down') {
$("body").animate({backgroundColor: 'rgba(60,200,0,0.5)'},5000)
}
else {
$("body").animate({backgroundColor: 'rgba(96,0,179,0.5)'},5000)
}
});There we go, the final script.js (without the plugin code at the top) should look like this:
$(document).ready(function() {
$("#chapter2").waypoint(function(event, direction) {
if (direction === 'down') {
$("body").animate({backgroundColor: 'rgba(25,148,255,0.5)'},5000)
}
else {
$("body").animate({backgroundColor: 'rgba(240,255,0,0.5)'},5000)
}
});
$("#chapter3").waypoint(function(event, direction) {
if (direction === 'down') {
$("body").animate({backgroundColor: 'rgba(255,0,0,0.5)'},5000)
}
else {
$("body").animate({backgroundColor: 'rgba(25,148,255,0.5)'},5000)
}
});
$("#chapter4").waypoint(function(event, direction) {
if (direction === 'down') {
$("body").animate({backgroundColor: 'rgba(96,0,179,0.5)'},5000)
}
else {
$("body").animate({backgroundColor: 'rgba(255,0,0,0.5)'},5000)
}
});
$("#chapter5").waypoint(function(event, direction) {
if (direction === 'down') {
$("body").animate({backgroundColor: 'rgba(60,200,0,0.5)'},5000)
}
else {
$("body").animate({backgroundColor: 'rgba(96,0,179,0.5)'},5000)
}
});
});Now preview index.html in a browser. You see the background changing colors as you scroll past each heading. Pretty cool, huh?
Note: Designers, please remember that a feature like this can be distracting to users. It’s best used with care and subtlety. Avoid bright colors and short transition times.
I hope you guys enjoyed this tutorial. The Waypoints plugin can do much more than this simple demonstration, so check out the documentation and have fun exploring. I’d love to hear your feedback or see how you’ve implemented this in your own designs. Let me know in the comments!
