scrollytelling-beginners: A JavaScript repository from ᴜᴄʟᴀʙ

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
Scrollytelling for Beginners # 3: Theory — CSS and Vue transitions, Scrollama

Resources

In resources/ you can find a collection of markdown files:

resources/foundations.md contains articles, tutorials and other resources to learn the foundations of JS and other tricks
resources/random.md is just cool stuff
resources/libraries.md will contain a selection of interesting js libraries.

Coming soon

resources/scrollytelling.md will 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)

light-server with node/npm

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

Python's SimpleHTTPServer

Follow this guide to fully understand what are you doing and/or install python.

If you already have python installed, in the code directory run:

python -V

To check your python version.

Enter the command to start the server in the directory:

# If Python version returned above is 3.X
python3 -m http.server
# On windows try "python" instead of "python3", or "py -3"
# If Python version returned above is 2.X
python -m SimpleHTTPServer

Atom's Package atom-live-server

If you are using Atom:

go to Preferences > Packages > in the search bar type 'atom-live-server' > Install and/or Enable
In the menu bar go to Packages > atom-live-server > Start server

uclab-potsdam/scrollytelling-beginners