D3 Examples - Template: Scrollytelling with Scrollama.js (v2)

xxxxxxxxxx
 
<!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>
​
                        <figure class='sticky'>
                            <div class='bar-outer'>
                                <div class='bar-inner'></div>
                            </div>
                        </figure>
                    
                </div>
            </section>
​
        <!-- Scripts -->
        <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>
    