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>