Template: Scrollytelling with Scrollama.js (v2)

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <title>scrollytelling</title>
        <script src="https://d3js.org/d3.v4.min.js"></script>
				<script src="stickyfill.min.js"></script>
				<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
				<script src="https://unpkg.com/scrollama"></script>
        <link rel="stylesheet" href="scrollytelly.css">
        <style>
        	#scrolly-side .scrolly {
        		position: relative;
						display: flex;
						max-width: 60rem;
						margin: 3rem auto;
						background-color: cornsilk;
						padding: 1rem;
					}

article {
						position: relative;
						padding-right: 1rem;
						max-width: 30rem;
					}
						
					figure.sticky {
						position: sticky;
						width: 100%;
						height: 50vh;
						background: silver;
						margin: 0;
						top: 25vh;
						left: 0;
						-webkit-transform: translate3d(0, 0, 0);
						-moz-transform: translate3d(0, 0, 0);
						transform: translate3d(0, 0, 0);
					}
        </style>
    </head>
    <body>
 		
		 	<section id='scrolly-side'>
				 <div class='scrolly'>
					
					<article>
						<div class='step' data-width='10%' data-index='0'><p>Bar is 10%</p></div>
						<div class='step' data-width='90%' data-index='1'><p>Bar is 90%</p></div>
						<div class='step' data-width='50%' data-index='2'><p>Bar is 50%</p></div>
					</article>

<script>

const container = d3.select('#scrolly-side');
				var figure = container.select('figure');
				var article = container.select('article');
				const stepSel = article.selectAll('.step');

// instantiate the scrollama
				const scroller = scrollama();

// generic window resize listener event
				function handleResize() {
					// 1. update height of step elements
					var stepH = Math.floor(window.innerHeight * 0.75);
					stepSel.style('height', stepH + 'px');
					var figureHeight = window.innerHeight / 2
					var figureMarginTop = (window.innerHeight - figureHeight) / 2  
					figure
						.style('height', figureHeight + 'px')
						.style('top', figureMarginTop + 'px');
					// 3. tell scrollama to update new element dimensions
					scroller.resize();
				}

// scrollama event handlers
				function handleStepEnter(response) {
					console.log(response)
					updateChart(response.index)
				}

function updateChart(index) {
					const sel = container.select(`[data-index='${index}']`);
					const width = sel.attr('data-width');
					stepSel.classed('is-active', (d, i) => i === index);
					container.select('.bar-inner').style('width', width);
				}

function init() {
					Stickyfill.add(d3.select('.sticky').node());

// 1. force a resize on load to ensure proper dimensions are sent to scrollama
					handleResize();

// 2. setup the scroller passing options
					// this will also initialize trigger observations
					// 3. bind scrollama event handlers (this can be chained like below)
					scroller.setup({
						step: '#scrolly-side article .step',
						offset: 0.5,
						debug: false
					})
					.onStepEnter(handleStepEnter)

// setup resize event
					window.addEventListener('resize', handleResize);

}

init()
    	</script>
    </body>
</html>

https://d3js.org/d3.v4.min.js

https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js

https://unpkg.com/scrollama