Article Panel

This is article panel. In regular scrollytelling this is where most of text is displayed. For presentation slide, you can use this space for speaker notes.

You can display this view by calling the toggle method scrolly.toggleArticle(true). To hide this view, pass false.

Section Element

Each section in article panel should have scrolly-section class and data-slide-id attribute corresponding to the same attribute in slide element.

Mark up for this section looks like this

<section class="scrolly-section" data-slide-id="myslideid">
  <h1>How to controll</h1>
</section>

When each section is active (clocest to top), corresponding slide element will be displaced.

Fragment

You can specify which fragmented element to be displayed in a slide by setting data-fragment-ids

For exampe, I have data-fragment-ids="1,2" set for this section.

Pretty cool, right ?

Event

You can use data-event-name attribute to trigger new Event("<-event-name->").

For example, once next section become active, it"ll trigger update event. I have D3 event listener set up to update the chart.

Booon...

Event sent

Last section

make sure your last section has .scrolly-section-last class added. This will add necessary margin at the bottom.

<section class="scrolly-section-last scrolly-section" data-slide-id="4">
  <h1>Last section</h1>
</section>

Scrolly Slides

Presentation slides in "Scrollytelling" format

Toggle this to see speaker notes!

Slide Element

Each slide element must have scrolly-slide class and data-slide-id attribute.

data-slide-id can be any string, but must be same as corresponding section element in article view.

Markup for this element looks like this.

<div class="scrolly-slide" data-slide-id="myslideid">
  <h3>Necessary class and attributes</h3>
</div>

Fragment

You can set fragment with data-fragment-id attribute.

just like ... this

<div class="scrolly-slide" data-slide-id="fragment">
  <span  data-fragment-id="1">
    <h3>Fragment</h3>
  </span>
  <p data-fragment-id="2">
    2nd fragment
  </p>
  <p data-fragment-id="3">
    3rd fragment
  </p>
</div>

This Wonderful Chart

Updated by event

Get started

Code: https://github.com/kosamari/scrolly-slides
Made by @kosamari
License: MIT
Learn more about Scrollytelling
  • SO YOU THINK YOU CAN SCROLL by Jim Vallandingham
  • graph-scroll.js by Adam Pearce
  • Don't wanna scroll?
  • SimpleSlides by Jenn Schiffer