Scrollytelling 2020 - Web Design for Storytelling

Name: Scrollytelling 2020 - Web Design for Storytelling
Rating: 4.3 (17 reviews)

How to Create the Best Web Designs for Stories using Scrollama.js

Created byMatthew Hawkins

Last updated 4/2020

English

What you'll learn

Scrollytelling
Web Design
Web Development
Website Design
Visual Storytelling
Journalism
Blogging
JavaScript
CSS
HTML
Scrollama
D3

Course content

1 section • 7 lectures • 42m total length

Course Introduction1:35
Master scrolling telling by using the web browser to create visualizations that update with your story, using the scroll llama library to tell a United Nations World Happiness Report narrative.
What is Scrollytelling?5:45
Explore scrollytelling, using interactive visualizations to engage audiences and highlight key points as the page updates through scrolling.
What is Scrollytelling?
Position: Sticky5:38
Master css position sticky to keep a figure centered while content scrolls, with two modes - sticky and fixed - and learn how top values and containers shape its behavior.
Position: Sticky
Scrollama setup()6:39
Explore how the scroll llama script uses setup and step triggers to update the figure as flags cross an invisible line, with offset and debug options.
Scrollama setup()
Coding for Scrollytelling6:13
Explore the code architecture of a scrollytelling page, covering the main HDMI file, CSS and JavaScript, scroll llama, and D3 updates that sync figures and text as you scroll.
Coding for Scrollytelling
Bringing it All Together10:49
Walk through the javascript for a scroll llama driven storytelling page, tying seven sections with an init sequence, and using d3 to size and toggle graphics.
Bringing it All Together
Using Transitions & Course Project5:39
Explore CSS transitions to enhance scroll storytelling by animating image opacity instead of display. Learn absolute positioning, resize handling, and project setup to build a seamless, immersive scroll narrative.
Using Transitions
Scrollytelling World Happiness

Requirements

Knowledge of basic HTML and JavaScript

Description

In this course you’ll learn how to use the full power of the web browser to make better stories for the web like this these: #1, #2, #3. Scrollytelling is a way of telling a story on the web as if you’re in the room with your audience, and it’s something you will need to add to your list of skills if you want your web content to stand out.

This course is focused on preparing you to complete a course project where you will use the United Nations World Happiness Report to tell a story about which of the world’s nations are becoming happier. In the final project, you will apply the knowledge gained in the course lectures to fill in the missing pieces of code that will make the webpage function.

When you complete this course, you will be ready to create your own, unique scrollytelling webpages.

What You Need To Get Started

• Knowledge of basic HTML, CSS, and JavaScript. You don’t need to be an expert!

• A laptop/desktop computer

• A text editing program. We suggest VSCode, which is free and absolutely excellent.

What’s Included in Your Course

• 6 easy-to-follow video tutorials

• The Course Project. This includes both unsolved and solved versions of the code.

• 3 well-commented scrollytelling code examples • 6 quizzes to solidify your understanding and keep you on track

• Access to the course Question & Answer Forum

Who this course is for:

Web Designers who want their content to stand out
Data Scientists who want to engage a wider audience
Bloggers who want to create a unique blog
Journalists who want to use visual storytelling
Web Developers who want to stand out