Skip to content

Instantly share code, notes, and snippets.

@lenagroeger
Created September 12, 2022 02:39
Show Gist options
  • Save lenagroeger/b4b7c61628f318212d91289b44cf7418 to your computer and use it in GitHub Desktop.
Save lenagroeger/b4b7c61628f318212d91289b44cf7418 to your computer and use it in GitHub Desktop.
Scrolly side-by-side
<style>
.scrolly-side-by-side {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1rem;
}
.scrolly-side-by-side > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.scrolly-side-by-side #steps {
position: relative;
padding: 0 1rem;
max-width: 550px;
}
.scrolly-side-by-side .sticky-item {
position: -webkit-sticky;
position: sticky;
width: 100%;
margin: 0;
z-index: 0;
top: 0vh;
height: 100vh;
/* Center everything inside */
display: flex;
align-items: center;
justify-content: center;
}
.scrolly-side-by-side .sticky-item img {
max-width: 600px;
}
.scrolly-side-by-side .step {
margin: 0 auto 90vh auto;
background: #fff;
border-radius: 5px;
border: 1px solid rgba(0,0,0,.5);
font-family: Graphik, sans-serif;
padding: 1.5rem 2rem;
line-height: 1.44rem;
}
.scrolly-side-by-side .step p {
margin: 0px;
}
.scrolly-side-by-side .step:first-child {
margin-top: 100vh;
}
.scrolly-side-by-side .step:last-child {
margin-bottom: 25rem;
}
@media screen and (max-width: 1000px) {
.scrolly-side-by-side {
display: block;
}
.scrolly-side-by-side .step:first-child {
margin-top: 0vh;
}
.scrolly-side-by-side #steps {
margin: auto;
}
}
</style>
<section id="scrolly-2" class="scrolly-side-by-side scroll-item">
<div class="sticky-item">
<img src="http://propublica.s3.amazonaws.com/projects/asbestos/organs_0.jpg">
</div>
<div id="steps" class="scrolly-text">
<div class='step'>
<strong>Esophagus</strong>
<p>Swallowed asbestos fibers can lodge in the esophagus and cause cancer.</p>
</div>
<div class='step'>
<strong>Lungs</strong>
<p>Inhaled asbestos fibers can get trapped deep in the lungs. This can lead to inflammation and scarring and can result in chronic coughing, chest pain and a lung disease called asbestosis.</p>
</div>
<div class='step'>
<strong>Lung Lining</strong>
<p> Asbestos fibers can also build up on the lining of the lungs, which may result in mesothelioma, a type of cancer.</p>
</div>
<div class='step'>
<strong>Heart</strong>
<p>Damage to the lungs can lower flow to the heart, causing enlargement or even heart failure.</p>
</div>
<div class='step'>
<strong>Stomach and intestines</strong>
<p>Ingested asbestos fibers can build up over time and cause cancer in the stomach or intestines.</p>
</div>
</div>
</section>
<script src="https://unpkg.com/scrollama"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const scrollys = document.querySelectorAll(".scroll-item");
scrollys.forEach(function (item) {
const scrollySteps = item.querySelectorAll(".scrolly-text .step");
// initialize scrollama
const scroller = scrollama();
scroller
.setup({
step: scrollySteps,
offset: 0.9,
})
.onStepEnter(handleStepEnter)
window.addEventListener("resize", scroller.resize);
function handleStepEnter(response) {
let num = response.index+1
let url = "http://propublica.s3.amazonaws.com/projects/asbestos/organs_"
item.querySelector("img").src = url+num+".jpg"
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment