Responsive Images: How they Almost Worked and What We Need. It’s our job, as designers and developers, to pick apart even the seemingly most simple tasks to find ways to improve them.
Web design in complicated and requires a lot of time and knowledge — and patience. It's no longer just embedded text background images and slices; it's interactivity and dynamic content, it's HTML5 and mobile development, it's JSON objects and Local Storage. No, I’m not talking about trying base jumping, I’m talking about how often you try new things in web design.
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. We can grab the newest version of jQuery here and put it in the js folder.