scrollama
Version:
Lightweight scrollytelling library using IntersectionObserver
233 lines (200 loc) • 5.02 kB
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@0.5.0/intersection-observer.js'></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>