<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Scrollama demo</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
min-height: 101vh;
}
p {
margin: 0;
}
#scroll {
background-color: #cdcdcd;
position: relative;
margin-top: 105vh;
margin-bottom: 200vh;
}
#scroll2 {
background-color: #cdcdcd;
position: relative;
margin-top: 50vh;
margin-bottom: 200vh;
}
.scroll__graphic {
position: absolute;
top: 0;
left: 0;
bottom: auto;
background-color: #ccc;
-moz-transition: background-color 250ms ease-in-out;
-webkit-transition: background-color 250ms ease-in-out;
transition: background-color 250ms ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.scroll__graphic.is-fixed {
position: fixed;
}
.scroll__graphic.is-bottom {
bottom: 0;
top: auto;
}
.scroll__text {
padding: 1rem;
position: relative;
}
.step {
max-width: 30rem;
margin: 3rem auto;
border: 2px solid #333;
background-color: #fff;
}
.step.is-active {
background-color: lightgoldenrodyellow;
}
.step p {
text-align: center;
padding: 1rem;
}
</style>
</head>
<body>
<section id="scroll">
<div class="scroll__text">
<div class="step" data-step="#ccc">
<p>Step 1</p>
</div>
<!-- <div class='step' data-step='#aaa'>
<p>Step 2</p>
</div> -->
<!-- <div class='step' data-step='#888'>
<p>Step 3</p>
</div>
<div class='step' data-step='#666'>
<p>Step 4</p>
</div> -->
</div>
</section>
<section id="scroll2">
<div class="scroll__text">
<div class="step" data-step="#ccc">
<p>Step 1</p>
</div>
<!-- <div class='step' data-step='#aaa'>
<p>Step 2</p>
</div> -->
<!-- <div class='step' data-step='#888'>
<p>Step 3</p>
</div>
<div class='step' data-step='#666'>
<p>Step 4</p>
</div> -->
</div>
</section>
<div class="debug"></div>
<script src="d3.v4.min.js"></script>
<script src="https://unpkg.com/intersection-observer"></script>
<script src="scrollama.js"></script>
<script>
var container = d3.select("#scroll");
var text = container.select(".scroll__text");
var step = text.selectAll(".step");
var container2 = d3.select("#scroll2");
var text2 = container2.select(".scroll__text");
var step2 = text2.selectAll(".step");
var scroller = scrollama();
var scroller2 = scrollama();
function handleResize() {
// var h = Math.floor(window.innerHeight * 0.75) + 'px'
step.each(function() {
var ran = 0.1 + Math.random();
var h = Math.floor(window.innerHeight * ran) + "px";
d3.select(this).style("height", h);
});
scroller.resize();
}
function handleStepEnter(resp) {
console.log("enter", resp);
step.classed("is-active", function(d, i) {
return i === resp.index;
});
var val = d3.select(resp.element).attr("data-step");
}
function handleStepExit(resp) {
console.log("exit", resp);
d3.select(resp.element).classed("is-active", false);
}
function handleProgress(resp) {
console.log("progress", resp);
}
function handleResize2() {
// var h = Math.floor(window.innerHeight * 0.75) + 'px'
step2.each(function() {
var ran = 0.1 + Math.random();
var h = Math.floor(window.innerHeight * ran) + "px";
d3.select(this).style("height", h);
});
scroller2.resize();
}
function handleStepEnter2(resp) {
console.log("enter", resp);
step2.classed("is-active", function(d, i) {
return i === resp.index;
});
var val = d3.select(resp.element).attr("data-step");
}
function handleStepExit2(resp) {
console.log("exit", resp);
d3.select(resp.element).classed("is-active", false);
}
function handleProgress2(resp) {
console.log("progress", resp);
}
function init() {
handleResize();
handleResize2();
scroller
.setup({
step: "#scroll .step",
offset: 0.33,
debug: true,
progress: true
})
.onStepEnter(handleStepEnter)
.onStepExit(handleStepExit)
.onStepProgress(handleProgress);
scroller2
.setup({
step: "#scroll2 .step",
offset: 0.67,
debug: true,
progress: true
})
.onStepEnter(handleStepEnter2)
.onStepExit(handleStepExit2)
.onStepProgress(handleProgress2);
console.log(scroller.getOffset());
console.log(scroller2.getOffset());
// window.addEventListener('resize', handleResize)
}
init();
</script>
</body>
</html>