Dynamically Change Background Color on Scroll

Dynamically change background color on scroll

You need to smoothly interpolate the colors by taking into account the page's scroll offset (window.scrollY, or window.pageYOffset on older browsers).

The Samsung site is transitioning a solid color instead of a gradient, which is a bit simpler.

Like this (see CodePen):

const [red, green, blue] = [69, 111, 225]
const section1 = document.querySelector('.section1')

window.addEventListener('scroll', () => {
  let y = 1 + (window.scrollY || window.pageYOffset) / 150
  y = y < 1 ? 1 : y // ensure y is always >= 1 (due to Safari's elastic scroll)
  const [r, g, b] = [red/y, green/y, blue/y].map(Math.round)
  section1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
})

You can apply the same logic to the gradient colors.

JavaScript Change Background Color On Scroll

Here is a dynamic way.

Get all containers elements and add the position of their top to an array:

containers = document.getElementsByClassName("container");
var containertops = [];
containertops.push(0);  // add for space before 1st container
for (var i = 0; i < containers.length; i++) {
  containertops.push(containers[i].offsetTop);
}

Make an array of the colour classes in the order to be used. It is easy to change the colours and order doing this:

// array of colours to use
var colours = [
  "white",
  "color-violet",
  "color-indigo",
  "color-blue",
  "color-green",
  "color-yellow",
  "color-orange",
  "color-red",
];

In scroll function, loop through the array of containers top positions. For each i in the loop, use this as an index to get a new colour from the colours array so the colour changes for every container. If there are more containers than colours, use the last colour for the rest.

// loop through the containers and add a new colour as the containers change
  for (var i = 0; i < containertops.length; i++) {

    // if this container is at the top of the screen get a new colour class
    if (document.body.scrollTop >= containertops[i] || document.documentElement.scrollTop >= containertops[i]) {
      document.body.className = '';  // clear class

      // if we have not enough colours, use the last colour class again
      colourclass= (i>=colours.length?colours.length-1: i);
      document.body.classList.add(colours[colourclass]);
    }
  }

This is the code working:

//dynamically add all containers to array
containers = document.getElementsByClassName("container");
var containertops = [];
containertops.push(0);  // add for space before 1st container
for (var i = 0; i < containers.length; i++) {
  containertops.push(containers[i].offsetTop);
}

// array of colours to use
var colours = [
  "white",
  "color-violet",
  "color-indigo",
  "color-blue",
  "color-green",
  "color-yellow",
  "color-orange",
  "color-red",
];

function showScrollColorChange() {
  // loop through the containers and add a new colour as the containers change
  for (var i = 0; i < containertops.length; i++) {
  
     // if this container is at the top of the screen get a new colour class
    if (document.body.scrollTop >= containertops[i] || document.documentElement.scrollTop >= containertops[i]) {
    
      document.body.className = '';  // clear class      
     // if we have not enough colours, use the last colour class again
      colourclass= (i>=colours.length?colours.length-1: i);
      document.body.classList.add(colours[colourclass]);
    }
  }
}


window.onscroll = function() {
  showScrollColorChange()
};

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  transition: background 300ms linear, color 300ms linear;
}

.container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 50px;
  min-height: 100vh;
}

p {
  width: 50%;
  font-size: 20px;
}

img {
  width: 500px;
  height: 500px;
  border-radius: 5px;
}


/* colours */

.color-violet {
  background-color: #7A4EAB;
}

.color-indigo {
  background-color: #4332CF;
}

.color-blue {
  background-color: #2F8FED;
}

.color-green {
  background-color: #4DCF42;
}

.color-yellow {
  background-color: #FAEB33;
}

.color-orange {
  background-color: #F19031;
}

.color-red {
  background-color: #F2293A;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil at eaque in aliquam assumenda. Officiis omnis ex sunt quaerat magni. Provident at nihil molestias dolores tempora voluptas laborum aspernatur sint.</p>
  <img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil at eaque in aliquam assumenda. Officiis omnis ex sunt quaerat magni. Provident at nihil molestias dolores tempora voluptas laborum aspernatur sint.</p>
  <img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil at eaque in aliquam assumenda. Officiis omnis ex sunt quaerat magni. Provident at nihil molestias dolores tempora voluptas laborum aspernatur sint.</p>
  <img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil at eaque in aliquam assumenda. Officiis omnis ex sunt quaerat magni. Provident at nihil molestias dolores tempora voluptas laborum aspernatur sint.</p>
  <img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil at eaque in aliquam assumenda. Officiis omnis ex sunt quaerat magni. Provident at nihil molestias dolores tempora voluptas laborum aspernatur sint.</p>
  <img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>

Trying to Dynamically change background video as user scrolls

you can just change the video.src property for changing video instead of creating a new video source eachtime , but your main issue was because you were using "document.body.scrollTop" it was not changing I have edited the code

HTML

<div class="section">

        <h1>1</h1>

        <div class="video-container">

            <video autoplay loop id="video-background" muted autoplay></video>
        </div>


  </div>

JS file

var video = document.getElementById('video-background');
  var source = document.createElement('source');
    window.onscroll = function() {

     if (document.documentElement.scrollTop > 200) {   
     if(video.src !== 'https://storage.googleapis.com/coverr-main/mp4/The-Slow-Dock.mp4'){
      video.src='https://storage.googleapis.com/coverr-main/mp4/The-Slow-Dock.mp4';
      }

          } 
      else{
       if(video.src !== 'https://storage.googleapis.com/coverr-main/mp4/Night-Traffic.mp4')
        video.src='https://storage.googleapis.com/coverr-main/mp4/Night-Traffic.mp4';

       }




        };

This is the fiddler attached https://jsfiddle.net/qtrfj3ks/4/

Dynamically change navbar color on scroll

Tweaking the computations a little, you could get something like this (instead of reducing the rgb values and fading to black, we are now increasing them and hence fading to white):

const [red, green, blue] = [249, 82, 4];const section1 = document.querySelector('.navbar');
window.addEventListener('scroll', () => {  let y = 1 + (window.scrollY || window.pageYOffset);  y = y < 1 ? 1 : y;  const [r, g, b] = [red + y, green + y, blue + y].map(Math.round);  section1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;})

body {  height: 100vh;  margin: 0;  padding: 0;}.navbar {  position: fixed;  top: 0;  left: 0;  background-color: rgb(249, 82, 4);  height: 50px;  width: 100%;  transition: background-color 200ms ease;}.section {  background: rgb(249, 82, 4);  height: 300%; }

<html><body>  <section class="navbar">  </section>  <section class="section">  </section></body></html>

change background-color of navbar when scroll event with vuejs

Add event listener to your window and assign new data to your data model and update it's value when scroll event is started. see code below

date model

data: {
    scrollPosition: null
},

methods

methods: {
    updateScroll() {
       this.scrollPosition = window.scrollY
    }
}

mounted hook

mounted() {
    window.addEventListener('scroll', this.updateScroll);
}

Now in your case, put this in your navbar

<nav :class="{change_color: scrollPosition > 50}">
      ...
      ...
</nav>

and put css to your change_color class

<style scoped>
   .change_color {
       background-color:red
   }
</style

Dynamically change UITableViewCell background color on scroll

You can create a gradient like the messages app using the CAGradientLayer.

Now, you can listen to the table view's scrolling using the UIScrollView delegate API. When scroll occurs, get all the visible cells of your table view, and calculate their frames in the superview (the table view) using convertPoint:toView: or convertRect:toView:. You can then make a small calculation of lighter and darker colors depending on the y coordinate.

Dynamically Change Background Color on Scroll