Skip to content

Instantly share code, notes, and snippets.

@cokfx

cokfx/changing-background-color-while-scrolling-version-2.markdown

Last active June 1, 2018 00:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cokfx/a6851af977bf078b82d739702b11061c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cokfx/a6851af977bf078b82d739702b11061c to your computer and use it in GitHub Desktop.
Download ZIP
INVIEW JQuery событие при прокрутке к определенному блоку
Raw
changing-background-color-while-scrolling-version-2.markdown

Changing background-color while scrolling version 2

So I thought it was about time I made a better version of my most popular pen.

A Pen by JP Nothard on CodePen.

License.

Raw
index.html
<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>
Raw
script.js
var $target = $('.wrapper');
inView('.section').on('enter', function(el){
var color = $(el).attr('data-background-color');
$target.css('background-color', color );
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/in-view.min.js"></script>
Raw
style.scss
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;
}
}
Raw
styles
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/_colors_1.scss" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment