I stumbled upon this incredible "Pause Scroll (Horizontal) Parallax" created by Khaled on Codepen.
One thing that has been puzzling me is how to make it run multiple times. It appears that when you try to apply it more than once, the duplicates don't work properly, only the first one does. I've experimented with different approaches and researched about running a script multiple times on the same page, but I haven't found a solution that works.
Here is a replica of the initial link, where I simply duplicated the same HTML 3 times. I would greatly appreciate any help in adjusting the JS for this.
HTML
<div class="bumper">
<h2>There should be a horizontal scroll area just below</h2>
</div>
<section class="container">
<div class="space-holder">
<div class="sticky">
<div class="horizontal">
<section role="feed" class="cards">
<article class="sample-card"></article>
<article class="sample-card"></article>
<article class="sample-card"></article>
<article class="sample-card"></article>
<article class="sample-card"></article>
</section>
</div>
</div>
</div>
</section>
<div class="bumper">
<h2>Scroll up to see a horizontal scroll section</h2>
</div>
...
CSS
*, *::before, *::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 100%;
}
body {
margin: 0;
font-family: sans-serif;
}
.bumper {
text-align: center;
padding: 128px 16px;
background-color: #efefef;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
}
...
JS
const spaceHolder = document.querySelector('.space-holder');
const horizontal = document.querySelector('.horizontal');
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
function calcDynamicHeight(ref) {
const vw = window.innerWidth;
const vh = window.innerHeight;
const objectWidth = ref.scrollWidth;
return objectWidth - vw + vh + 150; // 150 is the padding (in pixels) desired on the right side of the .cards container. This can be set to whatever your styles dictate
}
...