Adjust the color of text as you scroll

Question

Adjust the color of text as you scroll

Could you provide guidance on changing the color of fixed texts in specific sections of my portfolio website? Unfortunately, I can't share my lengthy code here, but would greatly appreciate it if you could illustrate with examples. Here's a reference site () that demonstrates text color change while scrolling - I want to implement something similar :)

P.S. Kindly advise using JavaScript, thanks!

I've tried searching for solutions, but haven't found anything satisfactory yet :(

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="/b/cs.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d489cdc7cbcad7e4958a9d8a95">[email protected]</a>/font/bootstrap-icons.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>

    <section class="section-top active" id="s1">
        
        <div class="details">
            <div class="top">
                <h2>Faxraddin</h2>
                <div class="lists">
                    <div class="nav-btn" id="nav-icon1" onclick="document.getElementById('nav-icon1').classList.toggle('open')">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="hide-it">
                    <div class="hide1">
                        <div class="p1">
                            <a class="hide1-btn">My Work</a>
                            <a class="hide1-btn">My Shelf</a>
                            <a class="hide1-btn">My Resume</a>
                        </div>
                         
                        <div class="p2">
                            <a class="hide-span">SAY HELLO</a>
                            <a class="hide-span"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a00040905030903022a0d070b030644090507">[email protected]</a></a>
                            <a class="hide-span">t/me.com</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="first-info">
                <div class="first-sec">
                    <h1>Frontend</br> Developer.</h1>
                    <h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
                </div>
                <img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
            </div>

            <div class="some-info">
                <div class="a1">
                    <span>Highly skilled at progressive
                enhancement, design systems &
                UI Engineering.
                    </span>
                    <span>Over a decade of experience
                building products for clients
                across several countries.
                    </span>
                </div>

                <div class="btn-container">
                    <ul>
                        <a class="a" href="#s1"><div class="btn"></div></a>
                        <a class="a" href="#s2"><div class="btn"></div></a>
                        <a class="a" href="#s3"><div class="btn"></div></a>
                        <a class="a" href="#s4&...

javascript html css

Answer 1

Answer №1

If you're looking to track visibility and make changes based on it, consider using an intersection observer. This handy tool allows you to monitor a target element and trigger actions when it enters or exits the viewport.

I've put together a simple demo showcasing this functionality. In this example, we're observing 'section two' - changing its text color to purple when it's in view, and reverting back to black when it's out of sight.

const title = document.querySelector('.topbar__title');
const sectionOne = document.querySelector('.section--one');
const sectionTwo = document.querySelector('.section--two');

const observer = new IntersectionObserver((entry, observer) => {
  entry[0].isIntersecting > 0 ?
    title.style.color = sectionTwo.getAttribute('data-color') :
    title.style.color = sectionOne.getAttribute('data-color')
});

observer.observe(sectionTwo);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1rem;
  width: 100%;
  background-color: white;
}

.section {
  height: 150vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section--one {
  background-color: white;
}

.section--two {
  background-color: rgb(255 0 0 / 5%);
}

<div class="topbar">
  <h1 class="topbar__title">Title</h1>
</div>

<section class="section section--one" data-color="black">
  <h2>Section One</h2>
</section>

<section class="section section--two" data-color="purple">
  <h2>Section Two</h2>
</section>

You can expand on this by monitoring multiple sections or applying class changes instead of directly altering styles with JavaScript. Remember, this is just a basic illustration...

For more detailed insights about Intersection Observers, check out MDN's guide

Answer 2

If you're looking to track visibility and make changes based on it, consider using an intersection observer. This handy tool allows you to monitor a target element and trigger actions when it enters or exits the viewport.

I've put together a simple demo showcasing this functionality. In this example, we're observing 'section two' - changing its text color to purple when it's in view, and reverting back to black when it's out of sight.

const title = document.querySelector('.topbar__title');
const sectionOne = document.querySelector('.section--one');
const sectionTwo = document.querySelector('.section--two');

const observer = new IntersectionObserver((entry, observer) => {
  entry[0].isIntersecting > 0 ?
    title.style.color = sectionTwo.getAttribute('data-color') :
    title.style.color = sectionOne.getAttribute('data-color')
});

observer.observe(sectionTwo);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1rem;
  width: 100%;
  background-color: white;
}

.section {
  height: 150vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section--one {
  background-color: white;
}

.section--two {
  background-color: rgb(255 0 0 / 5%);
}

<div class="topbar">
  <h1 class="topbar__title">Title</h1>
</div>

<section class="section section--one" data-color="black">
  <h2>Section One</h2>
</section>

<section class="section section--two" data-color="purple">
  <h2>Section Two</h2>
</section>

You can expand on this by monitoring multiple sections or applying class changes instead of directly altering styles with JavaScript. Remember, this is just a basic illustration...

For more detailed insights about Intersection Observers, check out MDN's guide

Answer 3

Answer №2

Click this link to view the code: Visit Code

<html>
<head>
    <title>Javascript Scroll Background Change</title>
</head>

<body>
    <h1>STAGE1</h1>
    <div id="stage1">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis, lectus ac efficitur congue, urna enim tincidunt metus, eget mattis purus nibh non tellus.
        </p>
        <p>Additional content here...</p>
        <p>More content goes here...</p>
        <p>Extra details...</p>
        <p>And more...</p>
    </div>

    <h1>STAGE2</h1>
    <div id="stage2">
        <p>
            Sed pretium orci vel neque vestibulum, et sagittis mi accumsan. Aliquam eu consequat justo. Cras elementum vehicula libero at gravida.
        </p>
        <p>Additional content here...</p>
        <p>More content goes here...</p>
        <p>Extra details...</p>
        <p>And more...</p>
    </div>

    <h1>STAGE3</h1>
    <div id="stage3">
        <p>
            Morbi sapien ex, fermentum eu condimentum quis, accumsan in erat. Duis pellentesque magna ac magna ultricies malesuada.
        </p>
        <p>Additional content here...</p>
        <p>More content goes here...</p>
        <p>Extra details...</p>
        <p>And more...</p>
    </div>

    <h1>STAGE4</h1>
    <div id="stage4">
        <p>
            Nullam dapibus mauris at odio pulvinar tempus. Fusce vitae varius nisl. Ut tempor risus a diam porttitor molestie.
        </p>
        <p>Additional content here...</p>
        <p>More content goes here...</p>
        <p>Extra details...</p>
        <p>And more...</p>
    </div>

    <h1>STAGE5</h1>
    <div id="stage5">
        <p>
            In hac habitasse platea dictumst. Ut blandit eros velit, id ornare nunc interdum sed. Donec nec cursus purus, non facilisis dui.
        </p>
        <p>Additional content here...</p>
        <p>More content goes here...</p>
        <p>Extra details...</p>
        <p>And more...</p>
    </div>

    <script
        src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
        crossorigin="anonymous"></script>

    <script>
        function changeBackground(color) {
            document.body.style.background = color;
        }

        // changeBackground("#000");

        var position1 = $("#stage1").offset();
        var position2 = $("#stage2").offset();
        var position3 = $("#stage3").offset();
        var position4 = $("#stage4").offset();
        var position5 = $("#stage5").offset();

        $(window).scroll(function (event) {
            var scroll = $(window).scrollTop();
            // Do something

            console.log(scroll);

            if (scroll == 0) {
                changeBackground("#FFF");
            }
            else if (scroll > position1['top'] && scroll <= position2['top']) {
                changeBackground("red");
            }
            else if (scroll > position2['top'] && scroll <= position3['top']) {
                changeBackground("blue");
            }
            else if (scroll > position3['top'] && scroll <= position4['top']) {
                changeBackground("yellow");
            }
            else if (scroll > position4['top'] && scroll <= position5['top']) {
                changeBackground("brown");
            }
            else if (scroll > position5['top']) {
                changeBackground("green");
            }
        });
    </script>
</body>

Answer 4

Click this link to view the code: Visit Code

<html>
<head>
    <title>Javascript Scroll Background Change</title>
</head>

<body>
    <h1>STAGE1</h1>
    <div id="stage1">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis, lectus ac efficitur congue, urna enim tincidunt metus, eget mattis purus nibh non tellus.
        </p>
        <p>Additional content here...</p>
        <p>More content goes here...</p>
        <p>Extra details...</p>
        <p>And more...</p>
    </div>

    <h1>STAGE2</h1>
    <div id="stage2">
        <p>
            Sed pretium orci vel neque vestibulum, et sagittis mi accumsan. Aliquam eu consequat justo. Cras elementum vehicula libero at gravida.
        </p>
        <p>Additional content here...</p>
        <p>More content goes here...</p>
        <p>Extra details...</p>
        <p>And more...</p>
    </div>

    <h1>STAGE3</h1>
    <div id="stage3">
        <p>
            Morbi sapien ex, fermentum eu condimentum quis, accumsan in erat. Duis pellentesque magna ac magna ultricies malesuada.
        </p>
        <p>Additional content here...</p>
        <p>More content goes here...</p>
        <p>Extra details...</p>
        <p>And more...</p>
    </div>

    <h1>STAGE4</h1>
    <div id="stage4">
        <p>
            Nullam dapibus mauris at odio pulvinar tempus. Fusce vitae varius nisl. Ut tempor risus a diam porttitor molestie.
        </p>
        <p>Additional content here...</p>
        <p>More content goes here...</p>
        <p>Extra details...</p>
        <p>And more...</p>
    </div>

    <h1>STAGE5</h1>
    <div id="stage5">
        <p>
            In hac habitasse platea dictumst. Ut blandit eros velit, id ornare nunc interdum sed. Donec nec cursus purus, non facilisis dui.
        </p>
        <p>Additional content here...</p>
        <p>More content goes here...</p>
        <p>Extra details...</p>
        <p>And more...</p>
    </div>

    <script
        src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
        crossorigin="anonymous"></script>

    <script>
        function changeBackground(color) {
            document.body.style.background = color;
        }

        // changeBackground("#000");

        var position1 = $("#stage1").offset();
        var position2 = $("#stage2").offset();
        var position3 = $("#stage3").offset();
        var position4 = $("#stage4").offset();
        var position5 = $("#stage5").offset();

        $(window).scroll(function (event) {
            var scroll = $(window).scrollTop();
            // Do something

            console.log(scroll);

            if (scroll == 0) {
                changeBackground("#FFF");
            }
            else if (scroll > position1['top'] && scroll <= position2['top']) {
                changeBackground("red");
            }
            else if (scroll > position2['top'] && scroll <= position3['top']) {
                changeBackground("blue");
            }
            else if (scroll > position3['top'] && scroll <= position4['top']) {
                changeBackground("yellow");
            }
            else if (scroll > position4['top'] && scroll <= position5['top']) {
                changeBackground("brown");
            }
            else if (scroll > position5['top']) {
                changeBackground("green");
            }
        });
    </script>
</body>

Adjust the color of text as you scroll

Answer №1

Answer №2

Similar questions

How should I manage objects that are passed by reference in the context of functional programming?

Adjust the text size of Twitter Bootstrap on mobile screens

Reordering items in Angular2 ngFor without having to recreate them

What is the best way to retrieve the "value" property of an <input> element in HTML?

Text located incorrectly beside image within container box

Creating a JSON array using looping technique

Best practices for locating unique symbols within a string and organizing them into an array using JavaScript

Adjust image placement when resizing the window or rotating a mobile device

Are there any special CSS hacks that only work for IE8?

Creating a paragraph from text inputs using React

When navigating within a page, Firefox shows {{ }} tags while Chrome does not in AngularJS

Finding text outside of a HTML tag with jsoup

Transmit information to PHP via JSON with Cross Domain communication

Prevent time slots from being selected based on the current hour using JavaScript

Utilizing the MEAN stack to establish a connection with a simulated data collection

Troubles with basic jQuery hide and show functionalities

Is an input field/text area necessary for the traditional copy to clipboard feature?

Struggling to close modal popup after submitting form

Next.js is having trouble identifying the module '@types/react'

RTK Query may sometimes encounter undefined values when fetching data