Built with blockbuilder.org
xxxxxxxxxx<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="enter-view.min.js"></script> <link rel="stylesheet" href="scrollytelly.css"> </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> <figure class='sticky'> <div class='bar-outer'> <div class='bar-inner'></div> </div> </figure> </div> </section> <!-- Scripts --> <script> const container = d3.select('#scrolly-side'); const stepSel = container.selectAll('.step'); 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()); enterView({ selector: stepSel.nodes(), offset: 0.5, enter: el => { const index = +d3.select(el).attr('data-index'); updateChart(index); }, exit: el => { let index = +d3.select(el).attr('data-index'); index = Math.max(0, index - 1); updateChart(index); } }); } init() </script> </body></html> https://d3js.org/d3.v4.min.js