Skip to content

Instantly share code, notes, and snippets.

@lenagroeger
Created September 13, 2022 19:58
Show Gist options
  • Save lenagroeger/bc0ec02c56d5a9ade70101954aa6a1a0 to your computer and use it in GitHub Desktop.
Save lenagroeger/bc0ec02c56d5a9ade70101954aa6a1a0 to your computer and use it in GitHub Desktop.
Scrolly centered images
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0px;
}
.scrolly-centered {
position: relative;
font-family: Graphik, sans-serif;
}
.scrolly-centered .scrolly-text {
position: relative;
padding: 25px;
max-width: 35rem;
margin: 0 auto 1em;
}
.scrolly-centered .sticky-item {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
width: 100%;
margin: 0;
z-index: 0;
top: 0;
height: 100vh;
/* Center everything inside */
display: flex;
justify-content: center;
flex-direction: column;
justify-content: center;
}
.scrolly-centered .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-centered .step p {
text-align: center;
margin: 0px;
}
.scrolly-centered .container {
width: 100%;
height: 100%;
overflow: hidden;
}
.scrolly-centered .container img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/scrollama@3.1.1/build/scrollama.min.js" integrity="sha256-H3AUobqfxWl+jTSWAy5UPGuEVvps3bGsz6yR+Op49ZM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7.6.1/dist/d3.min.js" integrity="sha256-s4TPC67sA6qeFEP9ZwzUHJ7JhN75p7Tb/XrS8ZfVtXM=" crossorigin="anonymous"></script>
</head>
<body>
<section id="scrolly-1" class="scrolly-centered scroll-item">
<div class="sticky-item">
<div class="container">
<img src="http://propublica.s3.amazonaws.com/projects/graphics/img/reno/reno1.png">
</div>
</div>
<div class="scrolly-text">
<div class="step step-0">
<p>Nothing happens</p>
</div>
<div class="step step-1" >
<p>Step one</p>
</div>
<div class="step step-2">
<p>Step two</p>
</div>
<div class="step step-3">
<p>Step three</p>
</div>
</div>
</section>
<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)
.onStepExit(handleStepExit);
function handleStepEnter(response) {
let num = response.index+1
let url = "http://propublica.s3.amazonaws.com/projects/graphics/img/reno/reno"
item.querySelector("img").src = url+num+".png"
}
window.addEventListener("resize", scroller.resize);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment