Scrollytelling for beginners is a collection of code, resources and tutorials for the FH Potsdam students to help them dive in the topic of scrollytelling and scroll controlled narratives.
In this repository you will find:
- A list of tutorials covering the basic concepts behind scrollytelling and its technical implementation
- A collection of resources from other authors, from js libraries to articles and notable examples
- Plug-and-play templates to practically approach scrollytelling in a fun and light way
Tutorials
You can access all the theory articles here on our Medium page. Theory articles are introducing some useful concepts for the practice sessions.
Available articles
- Scrollytelling for Beginners # 1: Theory — Javascript, Libraries and Frameworks
- Scrollytelling for Beginners # 2: Theory - Import data, scale them and draw some figures
Coming soon
- Scrollytelling for Beginners # 3: Theory - Scrollytelling workflow and fancy animations
Resources
In resources/ you can find a collection of markdown files:
resources/foundations.mdcontains articles, tutorials and other resources to learn the foundations of JS and other tricksresources/random.mdis just cool stuffresources/libraries.mdwill contain a selection of interesting js libraries.
Coming soon
resources/scrollytelling.mdwill contain a collection of scrollytelling pieces.
Code
A basic (works local without the need to build things or even a server) scrollytelling template. See code/solutions for exercises solutions step by step.
Getting Started (Basic)
Open S01-Intro/index.html in your browser. start editing the files in S01-Intro/
in any code editor to change things.
Getting Started (Advanced)
This requires some experience in using a command line as well as having node/npm installed, but it gives the advantage to auto-reload pages when files are changed and enables linting to keep your code nice and tidy.
install packages in the project directory
npm i
start a server
npm run serve