Changing color smoothly on scroll using jQuery
In this post, I am going to share a jQuery plug-in that can be used for changing the color upon scrolling of the web page. It is a light-weight plug-in that is the only 3Kb file.
You may specify two colors with RGB values. The colors will transit between these two values as you scroll down or up the page.
See the online demo below and I will explain where you may set the color values.
A demo of color transition on scroll
Open the demo by clicking the image or link below and scroll down and up to see the transition.
See online demo and code
For setting up this plugin, you need to include the jQuery JS file, jQuery-ui.css, and jQuery-ui.min.js files (that you most probably already using.
The last two files are for the smooth color transition; otherwise, it will change suddenly.
These files are including in the <head> section:
<link rel=”stylesheet” href=”css/scrollColor/scrollColor.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<link rel=”stylesheet” href=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>
<script src=”js/scrollColor/scrollColor.js”></script>
The plug-in JS and CSS file can be downloaded here. The CSS contains only some style for the demo.
The markup used for the demo:
<div id="container"> <div id="content"> <p>The content comes here</p> <p>May contain images</p> <p>paragraphs</p> <p>Videos</p> <p>web forms</p> <p>demo content here</p> <p>demo content here</p> <p>demo content here</p> <p>demo content here</p> <p>demo content here</p> </div> </div>
Actually, this will contain the content of your web page where you want to use this plug-in.
How to change the two colors for a smooth transition on scroll?
For changing the transition colors, you need to open the plug-in JS file (crollColor.js).
Find this line at the bottom of JS file:
changeColor(“container”, 64, 128, 128, 108, 108, 255);
Just change the RGB code it as per requirement.