How we can change text color on scroll using HTML CSS JS? Solution: See this Color Cross Text Reveal On Scroll Using CSS and JavaScript.
Previously I have share many text related programs, but this is about crossing colors on the scroll. Basically, the color cross effect is the switch between dark and light color according to the background. The main aim of this effect is showing characters clearly and creating cool and special effects on the element.
Today you will learn to create a text color switch program on scroll up or down. Basically, there is an image box and a text above or over the image. The part of the text which is over the image it color is white and the other is black, the text is change positon on scrolling. Text movement on scroll creates a little bit parallax effect.
So, Today I am sharing Color Cross Text Reveal On Scroll Using CSS and JavaScript. There I have used CSS for styling and JavaScript for changing the text’s position on scroll up or down. There is no jQuery or any other library, you can call this a pure CSS JS program. Many modern websites uses this kind of effect on their website, you also can use it.
If you are thinking now how this color cross effect actually is, then see the preview given below.
Preview Of Change Color When Scrolling
See this video preview to getting an idea of how this program looks like.
Now you can see this visually, also you 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:
Color Cross Text Reveal On Scroll Source Code
Before sharing source code, let’s talk about it. First I have created a main div named container and put 3 sections for image and text inside it. There I have created 2 sections of text because of one with dark color and one with white color. Also in the HTML file, I have linked other files like CSS, JS, and font.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave basic values using CSS like size, margin, padding, position, etc. I gave white color to one text and the other is black by default. In the HTML file when I have created the texts I gave a class name to identify the texts separately. There I have used CSS @media query to creating responsive elements.
JavaScript handling here the movement feature on scrolling. JS fetched the text using document.querySelectorAll 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 fro CSS, and the third file 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 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Cross Color Text Reveal | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="image-container" style="background-image: url('https://webdevtrick.com/wp-content/uploads/wire.jpg');"> <h2 class="section-title on-dark"> <span class="paralax-title"> Cross Color Text Reveal </span> </h2> </div> <h2 class="section-title"> <span class="paralax-title"> Cross Color Text Reveal </span> </h2> </div> <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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { margin: 0; min-height: 3000px; font-family: 'Montserrat', sans-serif; } .container { max-width: 600px; margin: auto; width: 90%; padding: 200px 0px; position: relative; } .image-container { padding-bottom: 100%; background: black; position: relative; overflow: hidden; z-index: 2; background-size: cover; background-position: center; } .section-title { margin: 0; font-size: 64px; width: 100%; text-align: center; position: absolute; top: 50%; left: -30%; transform: translateY(-50%); z-index: 1; white-space: nowrap; } .section-title.on-dark { color: white; } .section-title span { position: relative; display: block; } @media (max-width:750px) { .container { width: 60%; } .section-title { font-size: 20px; } } |
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 |
// Code By Webdevtrick ( https://webdevtrick.com ) let didScroll = false; let paralaxTitles = document.querySelectorAll('.paralax-title'); const scrollInProgress = () => { didScroll = true } const raf = () => { if(didScroll) { paralaxTitles.forEach((element, index) => { element.style.transform = "translateX("+ window.scrollY / 10 + "%)" }) didScroll = false; } requestAnimationFrame(raf); } requestAnimationFrame(raf); window.addEventListener('scroll', scrollInProgress) |
That’s It. Now you have successfully created Color Cross Text Reveal On Scroll Using CSS and JavaScript. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
What if i want one header to scroll from left to right and another header to scroll from right to left? How to change?