<div class="background">
  <img src="http://lorempixel.com/800/600/sports/1/" alt="background" class="active" />
  <img src="http://lorempixel.com/800/600/sports/2/" alt="background" />
  <img src="http://lorempixel.com/800/600/sports/3/" alt="background" />
  <img src="http://lorempixel.com/800/600/sports/4/" alt="background" />
</div>

<div class="sections">
  <div>
    Lorem ipsum dolor sit amet consectetur adipiscing elit
  </div>

  <div>
    Cursus erat scelerisque vestibulum conubia tincidunt
  </div>

  <div>
    Cum maecenas orci lectus nascetur quisque
  </div>

  <div>
    Torquent ut donec felis ornare habitant dis potenti primis justo cubilia
  </div>
</div>
body {
  margin: 0;
}

.background img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity .5s ease;
}

.background img.active {
  opacity: 1;
}

.sections div {
  position: relative;
  margin: 99vh 3em 0;
  max-width: 10em;
  font-size: 3em;
  color: white;
}
View Compiled
const bgImgs = document.querySelectorAll('.background img')
const sections = document.querySelectorAll('.sections div')

const throttle = (fn, delay) => {
  let halt = false
  
  return () => {
    if (halt) return

    halt = true

    window.setTimeout(() => {
      fn()
      halt = false
    }, delay)
  }
}

const scrollHandler = () => {
  Array.from(sections).forEach((section, index) => {
    if (section.offsetTop < window.scrollY + window.innerHeight) {
      bgImgs[index].classList.add('active')
    } else {
      bgImgs[index].classList.remove('active')
    }
  })
}

window.addEventListener('scroll', throttle(scrollHandler, 200))
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.