Change text color while scrolling

+1 vote

Im making portfolio website, and I want my fixed texts change its color on some sections, how can I do that ?I can't post my code,because its too big and long, but if you will give example with codes will be really pleased,here is how it must look like,you see how button and name is changing color while scrollings want to do as well:)

P.s please do it with js,thanks!

I tried to find info but I haven't find anything:(

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="/b/cs.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/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">jncoicih@gmail.com</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"><div class="btn"></div></a>
                        <a class="a" href="#s5"><div class="btn"></div></a>
                    </ul>
                </div>
            </div>

        </div>
    </section>

     
     <section class="what-do" id="s2">
         <div class="my-info">
            <div class="what-doing" id="i1">
                <h1>Design</h1>
                <p>
                    I'm probably not the typical designer positioned behind an Illustrator artboard adjusting pixels, but I design. Immersed in stylesheets tweaking font sizes and contemplating layouts is where you'll find me (~_^). I'm committed to creating fluent user experiences while staying fashionable.
                </p>
            </div>
            <div class="what-doing" id="i2">
                <h1>Engineering</h1>
                <p>
                    In building JavaScript applications, I'm equipped with just the right tools, and can absolutely function independently of them to deliver fast, resilient solutions optimized for scale — performance and scalabilty are priorities on my radar
                </p>
            </div>
         </div>
     </section>

    <section class="exp" id="s3">
        <div class="e1">
            <div class="exp-info">
                <h2>Over the</br> past 3 years,</h2>
                <p>I've built products for companies and businesses around the globe ranging from marketing websites to complex solutions and enterprise apps with focus on fast, elegant and accessible user experiences.</p>
                <p>Currently, I work at Shopify as a Senior UX Developer and Accessibility advocate crafting thoughtful and inclusive experiences that adhere to web standards for over a million merchants across the world.</p>
                <p>Before now, I was Principal Frontend Engineer at hellotax, where I worked on a suite of tools and services tailored at providing fast, automated VAT Registration / filings & Returns solutions for multi-channel sellers across Europe.</p>
                <p>Prior to hellotax, I was Senior frontend engineering contractor with Pixel2HTML, building JavaScript applications and interfaces for orgs and individuals.</p>
                <p>I once also led the frontend team at a Russian startup, Conectar through building multiple React applications into a single robust learning platform.</p>
            </div>
            <img class="exp-img" src="/b/images/2634454 copy.pdf">
        </div>
    </section>

    <section class="done" id="s4">
        <div class="grid">
            <div class="what-done">
                <div class="w1">
                    <h1>I buld & </br> deign stuff</h1>
                    <p>Open source 
                    projects, web apps 
                    and experimentals.
                    </p>
                    <button class="done-btn">see my work ---></button>
                </div>
                <div class="w2">
                    <h1>I write,</br>sometimes</h1>
                    <p>About design, 
                    frontend dev, 
                    learning and life.
                    </p>
                    <button class="done-btn">read my article ---></button>
                </div>
            </div>
        </div>
    </section>

    <section id="s5" class="send-me">
        <div class="send-container">
            <div class="send-top">
                <h1>Send me a message!</h1>
                <p>Got a question or proposal, or just want</br>
                    to say hello? Go ahead.</p>
            </div>
            <div class="send-inputs">
                <div class="l">
                    <label>Your Name</label>
                    <input type="text" placeholder="Enter your name">
                </div>

                <div class="l">
                    <label>Email Address</label>
                    <input type="text" placeholder="Enter your address">
                </div>
            </div>
            <div class="send-final">
                <input type="text" placeholder="Hi,i think we have to work together">
                <button class="shoot">SHOOT ---></button>
            </div>
        </div>
    </section>

    <section class="end-1" id="s6">
        <div class="end-container">
            <div class="end-info">
                <div class="e2" id="ll">
                    <span>SAY HELLO</span>
                    <span>hello@olaolu.dev</span>
                    <span>t.me/mrolaolu</span>
                </div>
                <div class="e2">
                    <span>My Work</span>
                    <span>My Shelf</span>
                    <span>My Resume</span>
                </div>
            </div>
            <h2 class="end-link">© Faxraddin Olawuyi 2022</h2>
        </div>
    </section>

    <script src="/b/js.js"></script>
</body>
</html>


    body {
    margin: 0;
    padding: 0;
    scroll-snap-type: y mandatory;
}

html{
    scroll-behavior: smooth;
}

.bar1, .bar2, .bar3 {
    width: 2.5vw;
    height: .35vw;
    background-color: #333;
    margin: 6px 0;
    transition: 0.2s;
}


.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}

section{
    scroll-snap-align: start;
}

.section-top{
    height: 47vw;
    padding-bottom: 10vw;
}

.details{
    background-color:#0b2361;
    background-repeat: no-repeat;
    background-size: 100vw 100%;
}

.top {
    display: flex;
    justify-content: space-between;
    padding: 1vw;
    padding-bottom: 6vw;
}

.top h2{
    font-size: 2.2vw;
    margin: 0;
    margin-top: 30px;
    margin-left: 60px;
    color:#e9ecf4;
    position: fixed;
    z-index: 3;
}

.nav-btn {
    background: none;
    border: none;
    font-size: 3vw;
    cursor: pointer;
    position: fixed;
    right: 4.5vw;
    top:4vw;
    z-index: 3;
    padding-bottom: 2vw;
}

#l1{
    width: 3vw;
}

#l2{
    width: 2vw;
}

.first-info{
    display: flex;
    justify-content: space-between;
    width: 70vw;
    margin-left: 10vw ;
    padding-top: 30px;
}

.first-sec h1{
    font-size: 4.4vw;
    color: #f1554c;
}

.first-sec h3{
    width: 35vw;
    margin-top: -2vw;
    font-size: 1.5vw;
    color:#e9ecf4;
}

.my-img{
    width: 24vw;
    margin-top: 10px;
}

.a1{
    display: flex;
    justify-content: space-between;
    width: 35vw;
    margin-left: 10vw ;
    padding-top: 30px;
    color:#f1554c;
    margin-top: 20px;
    padding-bottom: 6.5vw;
    font-size: 1.3vw;
}

.a1 span{
    width: 45%;
    font-size: 1vw;
}


.some-info {
    display: flex;
    justify-content: space-between;
    width: 93vw;
}

.btn-container{
    position: fixed;
    z-index: 1;
    right: 0;
    padding-right: 5.5vw;
    margin-top: -3vw;
    
}

.btn-container ul{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn{
    margin:.7vw;
    cursor: pointer;
    z-index: 1;
    width: .2vw;
    height: .2vw;
    background-color: black;
    transform: rotate(45deg);
    border-style:solid;
    transition: 0.3s;
}

.what-do{
    background-repeat: no-repeat;
    background-size: 100vw 100%;
    height: 840px;
    background-color: #e9ecf4;
}

.my-info{    
    display: flex;
    margin-left: 7vw ;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.what-doing{
    width: 50%;
}

.what-doing h1{
    font-size: 4vw;
    color: #f1554c;
}

.what-doing p{
    font-size: 1.2vw;
    width: 30vw;
    margin-top: -2vw;
    color:#0b2361;
}

#i2{
    margin-top: 17vw;
    margin-left: 1vw;
}

.exp{
    height: 840px;
    background-color:#0b2361
}

.e1{
    display: flex;
    justify-content: space-between;
    width: 85vw;
    padding-top: 1vw;
    margin-left: -8vw;
    padding-bottom: 2vw;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.exp-info{
    display: flex;
    flex-direction: column;
    margin-left: 10vw;
    color: #e9ecf4;
}

.exp-info h2{
    font-size: 4.5vw;
    margin-bottom: 0;
}

.exp-info p{
    width: 25vw;
    font-size: 1.1vw;
}

.exp-img{
    height: 40vw;
    margin-top: 6vw;
}

.done{
    height: 840px;
    background-color:#e9ecf4;
}

.grid{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.what-done{
    display: flex;
    margin: auto;
    width: 90vw;
    height: 40vw;
    background-color: whitesmoke;
}

.w1{
    width: 50%;
    text-align: left;
    padding: 5vw;

}

.w2{
    width: 50%;
    text-align: left;
    padding: 5vw;
    border-left-style: solid;
    border-width: thin;
}

.w1 h1{
    font-size: 3.3vw;
    color: #f1554c;
}

.w1 p{
    font-size: 2vw;
    color:#0b2361;
}

.w2 h1{
    font-size: 3.3vw;
    color: #f1554c;
}

.w2 p{
    font-size: 2vw;
    color: #0b2361;
}

.done-btn{
    background: none;
    cursor: pointer;
    font-size: 1.3vw;
    padding: 1.3vw 5vw 1.3vw 5vw;
    margin-top: 3vw;
    color: #f1554c;
}

.hide-it{
    position: absolute;
    transition: 0.2s;
    background-color: white;
    height: 0;
    width: 25vw;
    position: fixed;
    right: 3vw;
    top:3vw;
    color: white;
}

.hide1{
    display: flex;
    flex-direction: column;
}

.p1{
    display: flex;
    flex-direction: column;
    padding-top: 6vw;
    padding-left: 2.7vw;
    transition: 0.1s;
    visibility: hidden;
    transition: 0.1;
}

.hide1-btn{
    border: none;
    background: none;
    font-size: 1.4vw;
    text-align: left;
    padding: 10px;
}

.p2{
    display: flex;
    flex-direction: column;
    padding-top: 6vw;
    padding-left: 2.7vw;
    transition: 0.1s;
    visibility: hidden;
    transition: 0.9;
}

.hode-1{
    font-size: 1.4vw;
    text-align: left;
    padding: 10px;
}

.hide-span{
    font-size: 1.4vw;
    text-align: left;
    padding: 10px;
}

.active{
    visibility: visible;
    height: 34vw;
    z-index: 2;
    color: black;
}

.active2{
    visibility: visible;
}
 
.btn.active1{
    background-color: white;
    width: .7vw;
    height: .7vw;
    transform: rotate(0deg);
    border-radius: 4px;
}

#nav-icon1 {
    width: 4vw;
    height: 3vw;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }
  
#nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 3.5vw;
    background: black;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  
  #nav-icon1 span:nth-child(1) {
    top: 0px;
  }
  
  #nav-icon1 span:nth-child(2) {
    top: 18px;
  }
  
  #nav-icon1 span:nth-child(3) {
    top: 36px;
  }
  
  #nav-icon1.open span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  
  #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  
  #nav-icon1.open span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  
.send-me{
    height: 840px;
    background-color: #e9ecf4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.send-top h1{
    font-size: 3.3vw;
    text-align: center;
    color: #f1554c;
}

.send-top p{
    font-size: 1.7vw;
    color:#0b2361;
    text-align: center;
    margin-top: -2vw;
    padding-bottom: 5vw;
}

.send-inputs{
    display: flex;
    justify-content: space-between;
    width: 50vw;
}

.send-inputs input{
    outline: none;
    padding: 1vw 0vw 1vw 0vw;
    width: 21vw;
    height: 2vw;
    font-size: 1.3vw;
    border-bottom: 5px solid black;
    border-width: thin;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.send-inputs label{
    font-size: 1vw;
}

.l{
    display: flex;
    flex-direction: column;
}

.send-final{
    padding-top: 4vw;
    width: 50.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    
}

.send-final input{
    background: none;
    font-size: 1.3vw;
    width: 100%;
    outline: none;
    padding: 1vw 0vw 1vw 0vw;
    height: 2vw;
    border-width: thin;
    border-bottom: 5px solid black;
    background: none;
    border-width: thin;
    border-top: none;
    border-left: none;
    border-right: none;
}

.shoot{
    border-width: thin;
    font-size: 1.3vw;
    border-color: black;
    margin-top: 4vw;
    width: 20vw;
    height: 4vw;

    background: none;
    cursor: pointer;
    font-size: 1.3vw;
    padding: 1.3vw 5vw 1.3vw 5vw;
}

.end-1{
    background-color: #0b2361;
    height: 830px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.end-container{
    display: flex;
    flex-direction: column;
    width: 80vw;
}

.end-info{
    border-width: thin;
    border-bottom: 5px solid #e9ecf4;
    background: none;
    border-width: thin;
    border-top: none;
    border-left: none;
    border-right: none;

    display: flex;
}

.e2{
    display: flex;
    flex-direction: column;
    font-size: 1.5vw;
    color: #e9ecf4;
    padding: 4vw 0vw 8vw 0vw;
}

.e2 span{
    padding-top: 1.5vw;
}

#ll{
    margin-top:-3vw;
    padding-right: 19vw;
}

.end-link{
    color: #e9ecf4;
    padding-top: 3vw;
}

Apr 28, 2023 in UI UX Design by Ashwini
 • 5,430 points • 3,630 views

1 answer to this question.

0 votes

To change the color of a fixed element on scroll using JavaScript, you can use the window.addEventListener method to listen for the scroll event, and then use the window.pageYOffset property to determine the current vertical scroll position of the page. Based on the scroll position, you can add a class to the element to change its color.

answered Apr 28, 2023 by seena

Related Questions In UI UX Design

0 votes
1 answer

Can i learn back-end web development without having any knowledge on front end web development?

Hi Unfortunately no, you have to know the ...READ MORE

answered Apr 23, 2020 in Web Development by Chyanit
 • 160 points • 3,337 views
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17, 2020 in Web Development by anonymous
 • 37,520 points • 1,136 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
 • 82,800 points
edited Jan 21, 2020 by Niroj • 1,586 views
+1 vote
1 answer

What are pseudo class in css??

Hey, The state of an element is controlled  by ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
 • 82,800 points
edited Jan 21, 2020 by Niroj • 1,177 views
0 votes
1 answer

Outsourcing UI/UX while keeping the app code secret

If you want to outsource your UI/UX ...READ MORE

answered Apr 25, 2023 in UI UX Design by vishalini
 • 784 views
0 votes
1 answer

How do I make it where when I change my window size, the content adjusts with it?

To make the content adjust with the ...READ MORE

answered Apr 26, 2023 in UI UX Design by Tanishqa
 • 1,370 points • 793 views
0 votes
0 answers

Looping Animation of text color change using CSS3

I have text that I want to ...READ MORE

Jun 22, 2022 in CSS by Edureka
 • 13,680 points • 1,554 views
0 votes
0 answers

Is there a way to change the color of the placeholder text?

I tried to change the placeholder color ...READ MORE

Jul 4, 2022 in HTML by Tejashwini
 • 5,380 points • 571 views
0 votes
1 answer

How to color code cells of a column based on the text value in Tableau

You can use the following steps to ...READ MORE

answered Mar 27, 2018 in Tableau by Atul
 • 10,240 points • 10,467 views
+1 vote
1 answer

How to change fill color in each facet using ggplot2?

You can map the facetting variable to ...READ MORE

answered May 8, 2018 in Data Analytics by kappa3010
 • 2,090 points • 26,175 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP
"PMP®","PMI®", "PMI-ACP®" and "PMBOK®" are registered marks of the Project Management Institute, Inc. MongoDB®, Mongo and the leaf logo are the registered trademarks of MongoDB, Inc.