While working on a project (We’ll be announcing soon!), our design team wanted a nice color-changing background. Now, we know we could have used a static gradient, or simply faded between sections, but we thought it would be cool if the background changed as the user scrolled down the page, in a fixed manner. Usually when we meet a challenge like this, the first thing we do is check to see if anyone else has already done it, and in no time we found this jsfiddle: http://jsfiddle.net/cgspicer/V4qh9/. It’s great, but we needed a bit more. The current version only supports fades between two colors so we forked the code and expanded on it a little bit.

 

colorscroll

Installing

If you’d like to use this method for your next project, you’ll need jQueryjquery.color-2.1.0.js, and the bits of HTML/CSS/JS included in this jsfiddle: https://jsfiddle.net/jguffey/mxkx9j2o/.

Make it your own.

In the fiddle, we use `<section>` elements to mark the content boundaries, but you can use any element you want by changing the selector on line 8, and the corresponding CSS and HTML. The array of strings in the call to `scrollColors` (line 16) is where we store the colors we’d like to transition to. Remember to change the CSS background-color property for body (our color-change target) to match the first element in this array, or you’ll still get the bright pink color when the page first loads.

Thanks to the jQuery Color plugin, hex, rgb, and even rgba values are allowed. This can yield some cool effects when layered over an image or video. The alpha channel in RGBA is animated just like the other color channels, so you could have a sold color change opacity with scroll.

Enjoy!

 

About the Author
Author: Super User

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

 

 

Get Started Now With ShutterstockShutterstock

Best Rated Caching Plugin

Make your website faster 

How to make your website FAST!

Step-by-step - free email course, how to make your website load in less than 1 second  

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard