Svelte Scrolly

Overview

The Scrollytelling Template is a component-based rich media/scrollytelling template built with Svelte. It allows users to create interactive stories that scroll through various sections with dynamic content. With minimal setup required, users can easily clone the template and start building their projects.

Features

Component-Based: The template is organized into different components such as <ONSHeader/>, <ONSFooter/>, <Header/>, <Section/>, <Media/>, <Scroller/>, <Filler/>, and <Divider/>. Each component serves a specific purpose in building a scrollytelling story.
Easy Setup: Users can clone the template using degit, which creates a local copy of the files without creating a Git branch. Alternatively, users can also make live edits directly on the template.
Local Development Server: The template includes a local development server that allows users to see live changes as they edit the template. It runs on http://localhost:5000/ and automatically updates when changes are saved.
Flexible Customization: Most of the customization can be done within the /src folder, specifically in the App.svelte file, config.js, and utils.js. Users can also add images or data files directly into the img and data folders within the /public folder.

Installation

To clone the Scrollytelling Template and start building your project, follow these steps:

Install degit if you don’t have it already:
```
npm install -g degit
```
Clone the template using degit, replacing your-project with a name for your project folder:
```
degit sveltejs/template your-project
```
Open the project folder and install the dependencies:
```
cd your-project
npm install
```
Start the local development server to see live changes:
```
npm run dev
```
The server will run on http://localhost:5000/ and will automatically update whenever changes are saved.
Compile the project when you’re done creating your project. The compiled code will be found in the /public folder.

To edit the template, most of the code can be found in the /src folder, particularly in the App.svelte file. HTML structure and content, as well as JS functions for interactive elements, are contained in this file. Customization can also be done in config.js and utils.js. If additional images or data files are needed, they can be placed directly into the img and data folders within the /public folder. The index.html file in this folder can also be edited for title and meta tags.

Summary

The Scrollytelling Template is a Svelte-based template that provides a simple and efficient way to create dynamic, interactive scrollytelling stories. With its component-based structure and easy-to-use setup, users can quickly build their projects by cloning the template and customizing the various components and files. The template’s local development server allows users to see live changes as they edit the template, ensuring a smooth and efficient development process.