<!-- .wrapper
.scroll-list
.scroll-list__wrp.js-scroll-content.js-scroll-list
- for (i = 0; i <= 25; i++)
.scroll-list__item.js-scroll-list-item -->
<div class="wrapper">
<div class="scroll-list">
<!-- <h3 class="gold">Top 10 Articles for the Past Month</h3> -->
<div class="scroll-list__wrp js-scroll-content js-scroll-list">
<div class="scroll-list__item js-scroll-list-item">
<div class="image">
<img src="https://picsum.photos/300/300/?image=12" alt="picsum.photos">
</div>
<div class="desc">
<h4>Heading 1</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit, repudiandae impedit voluptates in quaerat veniam nobis accusamus amet quam!</p>
<button class="ripple">Button</button>
</div>
</div>
<div class="scroll-list__item js-scroll-list-item">
<div class="image">
<img src="https://picsum.photos/300/300/?image=13" alt="picsum.photos">
</div>
<div class="desc">
<h4>Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit, repudiandae impedit voluptates in quaerat veniam nobis accusamus amet quam!</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="scroll-list__item js-scroll-list-item">
<div class="image">
<img src="https://picsum.photos/300/300/?image=14" alt="picsum.photos">
</div>
<div class="desc">
<h4>Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit, repudiandae impedit voluptates in quaerat veniam nobis accusamus amet quam!</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="scroll-list__item js-scroll-list-item">
<div class="image">
<img src="https://picsum.photos/300/300/?image=15" alt="picsum.photos">
</div>
<div class="desc">
<h4>Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit, repudiandae impedit voluptates in quaerat veniam nobis accusamus amet quam!</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="scroll-list__item js-scroll-list-item">
<div class="image">
<img src="https://picsum.photos/300/300/?image=16" alt="picsum.photos">
</div>
<div class="desc">
<h4>Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit, repudiandae impedit voluptates in quaerat veniam nobis accusamus amet quam!</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="scroll-list__item js-scroll-list-item">
<div class="image">
<img src="https://picsum.photos/300/300/?image=17" alt="picsum.photos">
</div>
<div class="desc">
<h4>Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit, repudiandae impedit voluptates in quaerat veniam nobis accusamus amet quam!</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="scroll-list__item js-scroll-list-item">
<div class="image">
<img src="https://picsum.photos/300/300/?image=18" alt="picsum.photos">
</div>
<div class="desc">
<h4>Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit, repudiandae impedit voluptates in quaerat veniam nobis accusamus amet quam!</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="scroll-list__item js-scroll-list-item">
<div class="image">
<img src="https://picsum.photos/300/300/?image=19" alt="picsum.photos">
</div>
<div class="desc">
<h4>Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit, repudiandae impedit voluptates in quaerat veniam nobis accusamus amet quam!</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="scroll-list__item js-scroll-list-item">
<div class="image">
<img src="https://picsum.photos/300/300/?image=20" alt="picsum.photos">
</div>
<div class="desc">
<h4>Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit, repudiandae impedit voluptates in quaerat veniam nobis accusamus amet quam!</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="scroll-list__item js-scroll-list-item">
<div class="image">
<img src="https://picsum.photos/300/300/?image=21" alt="picsum.photos">
</div>
<div class="desc">
<h4>Heading</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia reprehenderit, repudiandae impedit voluptates in quaerat veniam nobis accusamus amet quam!</p>
<a href="#" class="btn">read more</a>
</div>
</div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Roboto:300,400,500");
$body-bg: #20262e;
$bg-dark: darken($body-bg, 10%);
$bg-light: lighten($body-bg, 10%);
$bg-over-light: lighten($body-bg, 15%);
$bg-super-light: lighten($body-bg, 35%);
$font: "Roboto";
$text: lighten($body-bg, 60%);
$akcentColor: #3266d5;
$shadow: 0px 7px 16px 0px rgba(41, 53, 108, 0.25);
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
overflow-x: hidden !important;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
height: 100%;
}
body {
position: relative;
// display: flex;
// flex-direction: column;
// justify-content: flex-start;
// align-items: flex-start;
font-family: $font, "-apple-system", BlinkMacSystemFont, Arial, sans-serif;
font-size: 1rem;
line-height: 1.467;
font-weight: 300;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $text;
background: radial-gradient(ellipse at center, $body-bg 0%, $bg-dark 80%)
fixed;
}
::-webkit-scrollbar {
width: 1rem;
-webkit-transition: 0.3s background;
transition: 0.3s background;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.85);
background: $bg-dark;
}
::-webkit-scrollbar-thumb {
border-radius: 1rem;
background: $bg-over-light;
box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
:hover::-webkit-scrollbar-thumb {
background: $bg-light;
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Oswald;
font-weight: 500;
margin-top: 0;
margin-bottom: 0.5rem;
}
h1 {
font-size: 2.625rem;
line-height: 1.2;
}
h2 {
font-size: 2rem;
line-height: 1.3;
}
h3 {
font-size: 1.5rem;
line-height: 1.4;
}
h4 {
font-size: 1.25rem;
line-height: 1.4;
}
h5 {
font-size: 16px;
line-height: 1.4;
}
h6 {
font-size: 0.875rem;
line-height: 1.4;
}
* + h1,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
margin-top: 24px;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
a {
color: inherit;
text-decoration: none;
}
.underline-animation {
display: inline-block;
position: relative;
&::after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 0;
left: 0;
background-color: #fff;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
&:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
}
// button {
// padding: 0;
// border: none;
// font: inherit;
// color: inherit;
// background-color: transparent;
// cursor: pointer;
// }
.btn {
/* default for <button>, but needed for <a> */
display: inline-block;
text-align: center;
text-decoration: none;
/* create a small space when buttons wrap on 2 lines */
margin: 2px 0;
/* invisible border (will be colored on hover/focus) */
border: solid 1px transparent;
border-radius: 4px;
/* button size comes from text + padding, avoid height */
padding: 0.5em 1em;
font-size: 0.875em;
/* make sure colors have enough contrast! */
color: #ffffff;
background-color: $akcentColor;
transition: all 0.2s ease-in-out;
/* old-school "down" effect on clic + color tweak */
&:active {
transform: translateY(1px);
filter: saturate(150%);
}
/* inverse colors on hover */
&:hover {
color: $akcentColor;
border-color: currentColor;
background-color: transparent;
}
/* Firefox: remove the inner border shown on focus */
&::-moz-focus-inner {
border: none;
}
/* make sure we have a visible focus ring */
&:focus {
outline: none;
box-shadow: 0 0 0 3px rgba($akcentColor, 0.5),
0 0 0 1.5px rgba($akcentColor, 0.5);
}
/* hide focus style if not from keyboard navigation */
&:focus:not(.focus-visible) {
box-shadow: none;
}
}
.ripple {
background-position: center;
transition: background 0.8s;
}
.ripple:hover {
background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%)
center/15000%;
}
.ripple:active {
background-color: #6eb9f7;
background-size: 100%;
transition: background 0s;
}
/* Button style */
button {
border: none;
border-radius: 2px;
padding: 1em 1.5em;
//font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: #fff;
background-color: $bg-light;
box-shadow: 0 0 4px #999;
outline: none;
}
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
.gold {
background: linear-gradient(90.16deg, #e8b98b 1.46%, #825b4d 101.44%);
-webkit-background-clip: text;
-webkit-text-fill-color: #000;
color: #d8b257;
display: inline-block;
}
.img-wrapper {
position: relative;
width: 100%;
padding-top: 75%; // for 4:3, 56.25% for 16:9
overflow: hidden;
img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
}
// scroll-block
.wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.scroll-list {
position: relative;
width: 100%;
max-width: 700px;
padding: 24px;
//margin: 48px auto 0;
@media screen and (max-width: 768px) {
margin-top: 24px;
}
h3 {
position: absolute;
left: 48px;
top: 24px;
max-width: 600px;
z-index: 3;
}
&__wrp {
width: 100%;
height: 90vh;
overflow: auto;
padding: 1rem;
box-shadow: 0px 7px 46px 0px rgba(41, 53, 108, 0.45);
//background-color: #252529;
margin-bottom: 15px;
border-radius: 8px;
.scrollbar-track {
display: none !important;
}
@media screen and (max-width: 768px) {
padding: 12px;
}
}
&__item {
position: relative;
display: flex;
justify-content: space-between;
align-items: stretch;
width: 100%;
height: auto;
padding: 1em;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.7);
margin-bottom: 1rem;
//cursor: pointer;
transition: all 0.35s ease-in-out;
opacity: 0;
transform: scale(0.75);
//box-shadow: $shadow;
&::after {
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #fff;
filter: alpha(opacity=10);
opacity: 0.1;
z-index: 4;
}
&:hover {
color: rgba(#fff, 0.75);
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.7);
}
.image {
height: 100%;
flex: 1 0 200px;
overflow: hidden;
img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
@media screen and (max-width: 480px) {
flex-basis: 100%;
width: 100%;
}
}
.desc {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
padding-left: 1rem;
align-self: flex-start;
font-size: 15px;
overflow: hidden;
.btn {
text-transform: uppercase;
background-color: $bg-light;
&:hover {
color: rgba(#fff, 0.75);
background-color: transparent;
}
}
@media screen and (max-width: 480px) {
padding-left: 0;
padding-top: 12px;
}
}
&.item-hide {
opacity: 0;
transform: scale(0.7);
}
&.item-focus {
opacity: 1;
transform: scale(1);
}
&.item-next {
opacity: 1;
transform: scale(1);
& + .scroll-list__item {
opacity: 1;
transform: scale(1);
}
}
// .scroll-list__item:first-child {
// margin-top: 48px;
// }
&:last-child {
margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
margin-bottom: 12px;
padding: 12px;
}
@media screen and (max-width: 480px) {
flex-direction: column;
}
}
}
.scroll-list__item:first-of-type {
margin-top: 32px;
}
// .scroll-list__item:last-of-type {
// margin-bottom: 155px;
// }
View Compiled
$(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;
}
}
});
});
This Pen doesn't use any external CSS resources.