<div class="wrapper">
  <div class="section" data-background-color="transparent">
    <h1 class="title">Changing background-color while scrolling version 2</h1>
  </div>
  <div class="section" data-background-color="#3498db">
    <h1 class="title">Is a remake of a plugin I made a long</h1>
  </div>
  <div class="section" data-background-color="#27ae60">
    <h1 class="title">looooooooooooooong time ago</h1>
  </div>
  <div class="section" data-background-color="#e74c3c">
    <h1 class="title">but this time I am going to use a plugin</h1>
  </div>
  <div class="section" data-background-color="#f39c12">
    <h1 class="title">this <a href="https://camwiegert.github.io/in-view/" target="blank">in-view.js</a> plugin</h1>
  </div>
  <div class="section" data-background-color="#f1c40f">
    <h1 class="title">and <a href="https://flatuicolors.com/" target="_blank">flat UI Colors</a></h1>
  </div>
  <div class="section" data-background-color="#8e44ad">
    <h1 class="title">and a lot more colours</h1>
  </div>
  <div class="section short" data-background-color="#16a085"></div>
  <div class="section short" data-background-color="#d35400"></div>
  <div class="section short" data-background-color="#2ecc71"></div>
  <div class="section short" data-background-color="#2980b9"></div>
  <div class="section short" data-background-color="#f1c40f"></div>
  <div class="section short" data-background-color="#1abc9c"></div>
  <div class="section short" data-background-color="#27ae60"></div>
  <div class="section short" data-background-color="#e74c3c"></div>
  <div class="section short" data-background-color="#2c3e50"></div>
  <div class="section short" data-background-color="#c0392b"></div>
  <div class="section short" data-background-color="#f39c12"></div>
  <div class="section short" data-background-color="#8e44ad"></div>
  <div class="section short" data-background-color="#9b59b6"></div>
  <div class="section short" data-background-color="#3498db"></div>
  <div class="section short" data-background-color="#34495e"></div>
  <div class="section" data-background-color="#8e44ad">
    <h1 class="title">the end.</h1>
  </div>
</div>

body {
  font-size: 100%;
  font-family: 'Source Sans Pro', sans-serif;
  color: $clouds;
  background: $dark;
}
.wrapper {
  transition: background .2s ease;
}
.section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.short {
  height: (100vh / 3);
}

.title {
  white-space: nowrap;
  font-weight: 100;
  font-size: 4vw;
  font-color: $clouds;
  
  a {
    color: inherit;
  }
}

var $target = $('.wrapper');
inView('.section').on('enter', function(el){
  var color = $(el).attr('data-background-color');
  $target.css('background-color', color );
});