Sticky Slides
HTML
<div style="background-image:url(https://images.unsplash.com/photo-1654514437330-69aa8be0e893?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60);" id="slide-one" class="stack__card">
<div class="card-overlay">
<ul class="flex-container">
<li class="flex-item flex1">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</li>
<li class="flex-item flex2">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</li>
</ul>
</div>
</div>
<div style="background-image:url(https://images.unsplash.com/photo-1654624745126-298502155c69?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60)" id="slide-two" class="stack__card"> <div class="card-overlay">Slide Two</div></div></div>
<div style="background-image:url(https://images.unsplash.com/photo-1654616605705-2ef59f08ae66?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60)" id="slide-three" class="stack__card outlier"> <div class="card-overlay">
<ul class="flex-container">
<li class="flex-item">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</li>
</ul>
</div></div></div>
<div style="background-image:url(https://images.unsplash.com/photo-1654586443280-8db3df4704df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxN3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60);" id="slide-four" class="stack__card"> <div class="card-overlay">Slide Four</div></div></div>
<div style="background-image:url(https://images.unsplash.com/photo-1572043775979-5353d3c61a21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXxTT01wRFowYnJZNHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60);" id="slide-five" class="stack__card"> <div class="card-overlay">Slide Five</div></div></div>
CSS
html {
font-family: sans-serif;
font-family: 'Open Sans', sans-serif;
}
body{
background-color:#000;
}
.stack__card {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
position: sticky;
top: 0;
box-shadow:inset 0 0 20px 0 #222222;
background-color: #efefef;
font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment: fixed;
}
.stack__card.outlier{
position:relative;
}
.card-overlay{
display: flex;
flex-wrap:wrap;
align-items:center;
justify-content: center;
width:100%;
height: 100%;
color:#fff;
background-color:rgba(0, 0, 0, 0.6);
}
.slide-columns{
align-content:center;
display: flex;
flex-wrap: wrap;
width: calc(100% - 40px);
max-width:960px;
flex-basis: 0;
flex-grow: 1;
background-color:#336699;
}
.slide-column{
align-content:center;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
box-sizing: border-box;
border-style:solid;
border-width: 10px;
border-color:transparent;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display:block;
position:relative;
max-width:1100px;
width: calc(100% - 20px);
margin: 0 auto;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap:wrap;
align-items: flex-start;
}
.flex-item {
padding: 10px;
margin:0 10px 20px 10px;
color: white;
text-align: left;
transition: all 0.05s;
display:flex;
line-height:1.5em;
align-items:center;
justify-content: center;
flex: 3 1 200px;
}
/* Grow, Shrink, Basis*/
.flex1 { flex: 3 1 200px; }
.flex2 { flex: 1 1 200px; }
.flex3 { flex: 1 1 200px; }
.flex4 { flex: 1 1 150px; }
.flex1_v2 { flex: 2 1 1;}
.flex2_v2 { flex: 1 1 150px;}
JAVASCRIPT
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
