Last active
September 12, 2022 14:08
-
-
Save lenagroeger/cdbea985a6f5ce23d09b01bc58607cd1 to your computer and use it in GitHub Desktop.
Scrolly centered
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 { | |
background: red; | |
width: 100%; | |
height: 100%; | |
padding: 1em; | |
} | |
</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"> | |
<!-- visual goes here --> | |
</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> | |
/* Scrollytelling code goes under here */ | |
d3.select("#scrolly-1 .step-0").on("stepin", function(e) { | |
d3.select(".container").style("background","red") | |
}) | |
d3.select("#scrolly-1 .step-1").on("stepin", function(e) { | |
d3.select(".container").style("background","blue") | |
}) | |
d3.select("#scrolly-1 .step-2").on("stepin", function(e) { | |
d3.select(".container").style("background","orange") | |
}) | |
d3.select("#scrolly-1 .step-3").on("stepin", function(e) { | |
d3.select(".container").style("background","yellow") | |
}) | |
</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) | |
.onStepExit(handleStepExit); | |
function handleStepEnter(response) { | |
const event = new CustomEvent('stepin', { detail: { direction: response.direction } }) | |
response.element.dispatchEvent(event); | |
} | |
function handleStepExit(response) { | |
const event = new CustomEvent('stepout', { detail: { direction: response.direction } }) | |
response.element.dispatchEvent(event); | |
} | |
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