Change Page Color On Scroll Using Locomotive Scroll

Question

Change Page Color On Scroll Using Locomotive Scroll

3.5k views Asked by Dpk At 20 November 2024 at 17:23

How to change Page color Smoothly on Scroll like this Amanda Braga Portfolio

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dpk</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css">

</head>

<body>

    <div data-scroll-container>
        <section data-scroll-section>
            <div class="container Blue"></div>
            <div class="container Red"></div>
            <div class="container Black"></div>
        </section>
    </div>

Here we can add Methods for changing Pagecolor

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
    <script>
        const scroll = new LocomotiveScroll({
            el: document.querySelector('[data-scroll-container]'),
            smooth: true
        });
    </script>
</body>

</html>

Original Q&A

There are 3 answers

JAB Clari On 05 January 2021 at 22:36

You need to give each section an "id" or you can still use a class. Use locomotives scroll event trigger to detect when that section is in-view and give it the colour.

DEMO using jquery.

const scroller = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
})

scroller.on('scroll', () => {
  sectionBgChange();
})


function sectionBgChange() {
  let firstSection = $('#yellow').offset().top;
  let secondSection = $('#blue').offset().top;
  let thirdSection = $('#red').offset().top;

  var scrollPos = $(document).scrollTop();
  if (scrollPos >= firstSection && scrollPos < secondSection) {
    $('#yellow').css('background-color', 'yellow');
  } else if (scrollPos >= secondSection && scrollPos < thirdSection) {
    $('#blue').css('background-color', 'blue');
  } else if (scrollPos >= thirdSection) {
    $('#red').css('background-color', 'red');
  } else {
    $('section').css('background-color', 'white');
  }
}

main {
  padding: 20px;
  background: #f2f2f2;
}

section {
  padding: 100px;
  margin: 10px 0;
  height: 50vh;
  z-index: 1;
  border: 1px solid #eaeaea;
  display: grid;
  place-content: center;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: bold;
  background-color: white;
  box-shadow: 0 2px 12px 0px rgba(0, 0, 0, 0.25);
  position: relative;
  border-radius: .5rem;
}

section::before {
  content: attr(data-section);
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main data-scroll-container>
  <section data-section="Yellow" data-scroll-section id="yellow"></section>
  <section data-section="Blue" data-scroll-section id="blue"></section>
  <section data-section="Red" data-scroll-section id="red"></section>
</main>

Carlos Volp On 06 April 2023 at 19:47

This work for me!

HTML code

<div id="body" data-scroll-container>
  <section class="box-item" data-scroll-section>
    <div class="box-item-content" data-scroll data-scroll-repeat data-scroll-call="colorWhite">
      <p>Text....</p>
    </div>
  </section>
  <section class="box-item" data-scroll-section>
    <div class="box-item-content" data-scroll data-scroll-repeat data-scroll-call="colorBlack">
      <p>Text....</p>
    </div>
  </section>
</div>

CSS Style

#body {
  transition: background-color 1s ease;
}

JS Code

const scroller = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

scroller.on('call', (value, way, obj) => {
  if (way === 'enter') {
    switch (value) {
      case "colorWhite": 
        document.querySelector('#body').style.backgroundColor = "#FFFFFF";
      break;      
      
      case "colorBlack": 
        document.querySelector('#body').style.backgroundColor = "#000000";
      break;          
    }
  } 
});

**Dpk** · Accepted Answer · 2021-02-13 12:17:04

Finally, I Found a Better way to achieve this

Here is Code in case someone need

HTML -

       <div class="vh-100">
            <span data-scroll data-scroll-repeat data-scroll-call="pageColor" 
             data-scroll-id="blue"> ____________blue  </span>
       </div>

       <div class="vh-100">
            <span data-scroll data-scroll-repeat data-scroll-call="pageColor" 
             data-scroll-id="green"> ____________green  </span>
       </div>

       <div class="vh-100">
            <span data-scroll data-scroll-repeat data-scroll-call="pageColor" 
             data-scroll-id="#ff0000"> ____________red  </span>
       </div>

CSS - (for Smooth Transitions)

body{   
 transition: background-color 1s ease;
 }
 .vh-100{
   height:100vh;
  }

JS - (GET ColorCode or Color name from data-scroll-id attribute from html element and assign it to body background color)

  setTimeout(() => {
    scroll.on('call', (value, way, obj) => {

      if (way === 'enter') {
        switch (value) {
          case "pageColor":
            // get color code from data-scroll-id  assigned to body by obj.id
               document.querySelector('body').style.backgroundColor = obj.id;
            break;      
       }
      }

    });
  }, 800);

TechQA.

Change Page Color On Scroll Using Locomotive Scroll

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in LOCOMOTIVE-SCROLL

Popular Questions

Popular Tags

Trending Questions