<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;
}
}
View Compiled
var $target = $('.wrapper');
inView('.section').on('enter', function(el){
var color = $(el).attr('data-background-color');
$target.css('background-color', color );
});