<div class="item" data-color="#CD5C5C"></div>
<div class="item" data-color="#98FB98"></div>
<div class="item" data-color="#FF1493"></div>
<div class="item" data-color="#FFFF00"></div>
<div class="item" data-color="#00CED1"></div>
<div class="item" data-color="#8A2BE2"></div>
<div class="item" data-color="#191970"></div>
<div class="item" data-color="#778899"></div>
<div class="item" data-color="#FFD700"></div>
<div class="item" data-color="#000000"></div>* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100px;
}
.item {
width: 500px;
height: 500px;
border: 1px solid #000;
border-radius: 4px;
margin-bottom: 100px;
transition: all 0.3s ease-in-out;
}
let $item = $('.item');
let $window = $(window);
function viewedItem() {
let scrollTop = $window.scrollTop();
let scrollBottom = scrollTop + $window.height();
$item.each((index, item) => {
let $currentItem = $(item);
let itemOffsetTop = $currentItem.offset().top;
let itemOffsetBottom = itemOffsetTop + $currentItem.height();
if (scrollTop < itemOffsetBottom && scrollBottom > itemOffsetTop && !$currentItem.attr('data-viewed')) {
let color = $currentItem.attr('data-color');
$currentItem.css('background-color', color);
$currentItem.attr('data-viewed', true);
}
});
}
viewedItem();
$(window).scroll(() => {
viewedItem();
});
External CSS
This Pen doesn't use any external CSS resources.