How we can change background color of the webpage on scrolling? Solution: See this JavaScript Change Background Color On Scroll, CSS Changing BG Color.
Previously I have shared gradient background animation using CSS, but this program changing background color on scroll. Basically, a website contains many sections on a single page and this type of program help to change the background color on section change. Suppose you scrolling up or down when a section will end and start a new, then the color will change.
Today you will learn to create CSS Changing BG Color. Basically there are 5 different sections when you will scroll down sections will be changed. When you will reach another section by scrolling there background color will change. In short, this program is changing the background color on scroll up or down.
So, Today I am sharing JavaScript Change Background Color On Scroll. There I have used jQuery, and as we know jQuery is a JS library that’s why I am putting this post in the JavaScript category. And in the program JS part changing the color on the scroll, CSS has very little part which is only for positioning. This program will very useful for you, and also you can use it on your website.
If you are thinking now how this BG color changing program actually is, then see the preview given below.
Preview Of CSS Changing BG Color
See this video preview to getting an idea of how this program looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- CSS Submit Button Animation
- Random Text Color Contrast
- Colorful Flat Navigation Bar
- Water Filling Text Animation
JavaScript Change Background Color On Scroll Source Code
Before sharing source code, let’s talk about it. First, I have created 5 article sections using HTML <article> tag. Inside every article tag I have placed a unique id name serial-wise like one, two, three. Also there I have used HTML Data-* element to store color values, The Data-* attribute is used for storing custom data (info).
Now using CSS I have placed all the elements in the right place, as you can see in the preview. There I have linked a google font using CSS @import command. In the CSS file, I have placed a background color which is also on the first article tag and put a transition delay for good visual. And I gave the height of each article 100vh, it means 100% height of device screen. Other basic works I have done using CSS like margin, padding, align, etc.
jQuery handling the main feature of this program. JS detecting the scroll position by identifying the article’s ID name and put the color value which I have stored in the HTML file (using Data-* attribute). For detecting the position according to ID I have used $(document).scrollTop() command. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Changing Background Color on Scroll</title> <link rel="stylesheet" href="style.css"> </head> <body> <article id="one" data-color="#11cf72"><h1>First</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat pretium odio ac vulputate. Nullam vitae diam id erat interdum dignissim. Nam eget faucibus metus. Pellentesque vitae nibh non mi ultrices rhoncus. Aliquam vestibulum ut massa vitae congue. Aliquam mauris neque, eleifend sit amet elit ut, placerat iaculis velit. Suspendisse potenti. Cras interdum interdum porttitor. Aenean ac enim vitae metus fringilla malesuada. Duis pharetra enim nulla, non eleifend ante lobortis ac. Duis quis purus lorem. Sed mattis massa ac nisl faucibus sagittis. Ut posuere velit massa, et malesuada elit condimentum ut. Integer lacinia risus ut ante cursus, sed porttitor nisl suscipit. Aliquam non ultricies massa. Donec vehicula sem at nisl lacinia ultrices.</p> <div class="clear"></div></article> <article id="two" data-color="#1da1f2"><h1>Second</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat pretium odio ac vulputate. Nullam vitae diam id erat interdum dignissim. Nam eget faucibus metus. Pellentesque vitae nibh non mi ultrices rhoncus. Aliquam vestibulum ut massa vitae congue. Aliquam mauris neque, eleifend sit amet elit ut, placerat iaculis velit. Suspendisse potenti. Cras interdum interdum porttitor. Aenean ac enim vitae metus fringilla malesuada. Duis pharetra enim nulla, non eleifend ante lobortis ac. Duis quis purus lorem. Sed mattis massa ac nisl faucibus sagittis. Ut posuere velit massa, et malesuada elit condimentum ut. Integer lacinia risus ut ante cursus, sed porttitor nisl suscipit. Aliquam non ultricies massa. Donec vehicula sem at nisl lacinia ultrices.</p> <div class="clear"></div> </article> <article id="three" data-color="#ff3f3f"><h1>Third</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat pretium odio ac vulputate. Nullam vitae diam id erat interdum dignissim. Nam eget faucibus metus. Pellentesque vitae nibh non mi ultrices rhoncus. Aliquam vestibulum ut massa vitae congue. Aliquam mauris neque, eleifend sit amet elit ut, placerat iaculis velit. Suspendisse potenti. Cras interdum interdum porttitor. Aenean ac enim vitae metus fringilla malesuada. Duis pharetra enim nulla, non eleifend ante lobortis ac. Duis quis purus lorem. Sed mattis massa ac nisl faucibus sagittis. Ut posuere velit massa, et malesuada elit condimentum ut. Integer lacinia risus ut ante cursus, sed porttitor nisl suscipit. Aliquam non ultricies massa. Donec vehicula sem at nisl lacinia ultrices.</p> <div class="clear"></div> </article> <article id="four" data-color="#ff0099"><h1>Fourth</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat pretium odio ac vulputate. Nullam vitae diam id erat interdum dignissim. Nam eget faucibus metus. Pellentesque vitae nibh non mi ultrices rhoncus. Aliquam vestibulum ut massa vitae congue. Aliquam mauris neque, eleifend sit amet elit ut, placerat iaculis velit. Suspendisse potenti. Cras interdum interdum porttitor. Aenean ac enim vitae metus fringilla malesuada. Duis pharetra enim nulla, non eleifend ante lobortis ac. Duis quis purus lorem. Sed mattis massa ac nisl faucibus sagittis. Ut posuere velit massa, et malesuada elit condimentum ut. Integer lacinia risus ut ante cursus, sed porttitor nisl suscipit. Aliquam non ultricies massa. Donec vehicula sem at nisl lacinia ultrices.</p> <div class="clear"></div> </article> <article id="five" data-color="#ff7a00"><h1>Fifth</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat pretium odio ac vulputate. Nullam vitae diam id erat interdum dignissim. Nam eget faucibus metus. Pellentesque vitae nibh non mi ultrices rhoncus. Aliquam vestibulum ut massa vitae congue. Aliquam mauris neque, eleifend sit amet elit ut, placerat iaculis velit. Suspendisse potenti. Cras interdum interdum porttitor. Aenean ac enim vitae metus fringilla malesuada. Duis pharetra enim nulla, non eleifend ante lobortis ac. Duis quis purus lorem. Sed mattis massa ac nisl faucibus sagittis. Ut posuere velit massa, et malesuada elit condimentum ut. Integer lacinia risus ut ante cursus, sed porttitor nisl suscipit. Aliquam non ultricies massa. Donec vehicula sem at nisl lacinia ultrices.</p> <div class="clear"></div> </article> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,900,700,500); body { background: #11cf72; color: #fff; font-family: 'Roboto', sans-serif; margin: 0; transition: all 200ms; will-change: background; } article { display: block; width: 100%; text-align: center; height: 100vh; margin: 6em 0 0 0; } h1 { font-size: 15em; font-weight: 900; margin: 0 0.1em; } article p { width: 50%; font-size: 1.1em; margin: 0 auto; } .clear { clear: both; } @media (max-width: 750px) { article p { width: 95%; } h1 { font-size: 5rem; } } |
function.js
The last step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Code By Webdevtrick ( https://webdevtrick.com ) var one = "#11cf72", two = "#1da1f2", three = "#ff3f3f", four = "#ff0099", five = "#ff7a00"; $(window).on("scroll touchmove", function() { if ($(document).scrollTop() >= $("#one").position().top) { $('body').css('background', $("#one").attr("data-color")); }; if ($(document).scrollTop() > $("#two").position().top) { $('body').css('background', $("#two").attr("data-color")) }; if ($(document).scrollTop() > $("#three").position().top) { $('body').css('background', $("#three").attr("data-color")) }; if ($(document).scrollTop() > $("#four").position().top) { $('body').css('background', $("#four").attr("data-color")) }; if ($(document).scrollTop() >= $("#five").position().top) { $('body').css('background', $("#five").attr("data-color")) }; }); |
That’s It. Now you have successfully created JavaScript Change Background Color On Scroll, CSS Changing BG Color. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
$(“#one”).attr(“data-color”));
what is data-color in this piece of code? and how it picks the another color?
good job
[…] Download Image More @ webdevtrick.com […]