This is a scrollytelling template for ai2html

Here is the subhead or additional content you want to add in

By Jonathan Soma

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

This has several differences with the other scrollytelling templates:

You will need scrolly-styles.css for the page to work for you. Note that the steps themselves are below the ai2html content.

To know the details of how this works, check out this video and this video.

Asia

Europe

Africa

Oceania

South America

North America

80 years

70

60

This country is an

important country

that we want to talk about

50

40

30

0

20,000

40,000

$60,000

Africa

Asia

Oceania

Europe

South America

North America

80 years

70

60

This country is an

important country

that we want to talk about

50

40

30

0

20,000

40,000

$60,000

Step one, adjust the CSS at the bottom of this page to change spacing between steps.

Here is some more text, in case there are multiple paragraphs.

Find the JavaScript code near the bottom to associate each step with an image change.

By default, the steps are a set width and the text is left-centered. Find the rule in scrolly-styles.css that refers to .step > * to adjust or remove the width, center the text, or change the background color/opacity.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is an image caption

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?