how to change color smooth in scrolling snapping?-CodePudding

I learning coding HTML and CSS, I'm practicing this project on this website:https://backstagetalks.com/#issue5. I'm wondering how can the background color of this website change so smoothly like that.

CodePudding user response：

Long story short

You need to change CSS transition property:

body{
  transition:background-color .2s ease-in-out;
}

This will animate/transition changing colors switched by "background-color" property.
If you are unsure of how the background color is changed you can do this:

body{
  transition:all .2s ease-in-out;
}

This will animate/transition everything

CodePudding user response：

You can use css transition property

Check the scrollTop and change the backgroundColor when scrollTop reach some number

const back = document.querySelector('.back')

back.addEventListener('scroll', (event) => {
  if (back.scrollTop >= 1000 && back.scrollTop < 2000) {
    back.style.backgroundColor = '#ffff00'
  } else if (back.scrollTop >= 2000 && back.scrollTop < 3000) {
    back.style.backgroundColor = '#00ff00'
  } else if (back.scrollTop >= 3000 && back.scrollTop < 4000) {
    back.style.backgroundColor = '#00ffff'
  } else if (back.scrollTop >= 4000 && back.scrollTop < 5000) {
    back.style.backgroundColor = '#0000ff'
  } else {
    back.style.backgroundColor = '#ff0000'

  }
})

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

.back {
  background-color: #ff0000;
  height: 296px;
  overflow-y: scroll;
  transition: background-color 2s ease-in-out; /* Change 2s with delay */
}

.content {
  height: 5000px;
  overflow: hidden;
}

<div >
  <div ></div>
</div>