<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
<div class="scroll-list">
<div class="scroll-list__wrp js-scroll-content js-scroll-list">
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
<div class="scroll-list__item js-scroll-list-item"></div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&subset=latin-ext");
html {
position: relative;
overflow-x: hidden !important;
}
body {
font-family: "Roboto", sans-serif;
font-size: 16px;
background: #f2f7fd;
}
a, a:hover {
text-decoration: none;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
align-items: center;
min-height: 100vh;
background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #fa9b48 100%);
}
.scroll-list {
width: 100%;
max-width: 700px;
padding: 25px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px) {
.scroll-list {
margin-top: 20px;
}
}
.scroll-list__wrp {
width: 100%;
height: 700px;
overflow: auto;
padding: 50px;
box-shadow: 0px 7px 46px 0px rgba(41, 53, 108, 0.45);
background: #4b1079;
background: #4b1079;
margin-bottom: 15px;
border-radius: 8px;
background-image: linear-gradient(147deg, #6e0777 0%, #380c70 74%);
}
.scroll-list__wrp .scrollbar-track {
display: none !important;
}
@media screen and (max-width: 768px) {
.scroll-list__wrp {
padding: 25px;
}
}
.scroll-list__item {
width: 100%;
height: 155px;
display: block;
margin-bottom: 15px;
border-radius: 8px;
background-image: linear-gradient(147deg, #ff7c34 0%, #c31269 74%);
transition: all 0.35s ease-in-out;
opacity: 0;
transform: scale(0.7);
box-shadow: 0px 7px 16px 0px rgba(41, 53, 108, 0.25);
}
.scroll-list__item.item-hide {
opacity: 0;
transform: scale(0.7);
}
.scroll-list__item.item-focus {
opacity: 1;
transform: scale(1);
}
.scroll-list__item.item-next {
opacity: 1;
transform: scale(1);
}
.scroll-list__item.item-next + .scroll-list__item {
opacity: 1;
transform: scale(1);
}
.scroll-list__item:last-child {
margin-bottom: 155px;
}
$(document).ready(function () {
var Scrollbar = window.Scrollbar;
Scrollbar.use(window.OverscrollPlugin);
var customScroll = Scrollbar.init(document.querySelector('.js-scroll-list'), {
plugins: {
overscroll: true
}
});
var listItem = $('.js-scroll-list-item');
listItem.eq(0).addClass('item-focus');
listItem.eq(1).addClass('item-next');
customScroll.addListener(function (status) {
var $content = $('.js-scroll-content');
var viewportScrollDistance = 0;
viewportScrollDistance = status.offset.y;
var viewportHeight = $content.height();
var listHeight = 0;
var $listItems = $content.find('.js-scroll-list-item');
for (var i = 0; i < $listItems.length; i++) {
listHeight += $($listItems[i]).height();
}
var top = status.offset.y;
// console.log(top);
var visibleCenterVertical = 0;
visibleCenterVertical = top;
var parentTop = 1;
var $lis = $('.js-scroll-list-item');
var $focusLi;
for (var i = 0; i < $lis.length; i++) {
var $li = $($lis[i]);
var liTop = $li.position().top;
var liRelTop = liTop - parentTop;
var distance = 0;
var distance = Math.abs(top - liRelTop);
var maxDistance = $('.js-scroll-content').height() / 2;
var distancePercent = distance / (maxDistance / 100);
if (liRelTop + $li.parent().scrollTop() > top) {
if (!$li.hasClass('item-focus')) {
$li.prev().addClass('item-hide');
$lis.removeClass('item-focus');
$lis.removeClass('item-next');
}
$li.removeClass('item-hide');
$li.addClass('item-focus');
$li.next().addClass('item-next');
break;
}
}
});
});
