Story scroll page: Free HTML Template

Site template · HTML + CSS + jQueryUpdated November 6, 2026

Full pageSite templateHTML + CSS + jQueryBy HTML5 UP · CC BY 3.0

This is the full template running in a frame. Scroll inside it, open its menu, or open it in its own tab to see it at full size.

What moves

The banner image fades in and its text slides in from the side on load.
Spotlight images and the gallery fade in as each one scrolls into view.
Gallery thumbnails open a full-size lightbox with a fade; links scroll smoothly to their section.

The motion is HTML5 UP's own CSS transitions and a small jQuery script, both unchanged. The page still works without JavaScript; it just skips the intro.

What we changed: only the colours

We swapped the original palette for Enrichr's deep green, cream, brand greens and lime. Everything else is HTML5 UP's: the HTML, the animation script, the layout, fonts, icons and images. Colours with transparency keep their original opacity.

Original	Enrichr
`#ffffff`	`#fbf8f1`
`#000000`	`#0c1e18`
`#eeeeee`	`#efeadf`
`#222222`	`#173229`
`#30363d`	`#1c3a30`
`#db8992`	`#e54c1e`
`#ab7aad`	`#4b1a9a`
`#897cad`	`#005236`
`#7794ce`	`#126e45`
`#64abb4`	`#1a7a4c`
`#6ba78c`	`#085e3d`
`#47d3e5`	`#005236`
`#1ebdd1`	`#003d28`

Some accents are swapped only where they read well: #e6ff55 replaces #47d3e5 on the dark (inverted) sections and the gallery; #d2eb3c replaces #1ebdd1 on the dark (inverted) sections and the gallery, when pressed.

How to use it

Download the .zip and unzip it.
Open index.html in a browser to check it, then edit the text, links and images in it.
Upload the whole folder to any static host (Netlify, Vercel, GitHub Pages or your own server).

The zip also holds HTML5 UP's README.txt and LICENSE.txt, the Sass source, and ENRICHR-COLOURS.txt, which lists every colour change.

Prompt for your AI assistant

Paste this into Claude, Cursor or ChatGPT together with the unzipped folder.

I downloaded the "Story scroll page" site template (by HTML5 UP, recoloured in Enrichr colours) from https://enrichr.dev/templates/html5up-story.html.
Unzip it and edit index.html for my site: [describe your site, its sections and tone].

Rules:
- Replace the placeholder text, links and images with mine. Keep image sizes close to the originals.
- Do not change assets/css/main.css or anything in assets/js: the layout and animations depend on them.
- Keep the class names and the HTML structure of each section, so the animations still run.
- Keep the "Design: HTML5 UP" credit in the footer (the CC BY 3.0 licence requires it).

Verify: open index.html in a browser, check there are no console errors, that the animations still play, and that it works at 375px wide.

The template as JSON: /templates/html5up-story.json.

What it is for

A product, project or personal story told section by section, with photos.

Section	Full one-page site
Techniques	Scroll-driven, Reveal and intro
Stack	HTML, CSS, jQuery
Mood	light, editorial
Original	Story on html5up.net

Licence and credit

Story is a free template by HTML5 UP (AJ (@ajlkn)), released under the Creative Commons Attribution 3.0 licence. You can use it in personal and commercial projects as long as you credit HTML5 UP; the template's footer already does, so leave it in. Enrichr changed only its colours. HTML5 UP is not affiliated with Enrichr and does not endorse this version.

Hyperspace sidebar siteA bold one-page site with a fixed sidebar menu that tracks your scroll position, full-height sections that fade up and a green-to-lime gradient underline. Dimension one-pagerA one-page site whose sections open as floating panels while the background zooms and blurs behind them. Recoloured in Enrichr greens, cream and lime. Phantom tile portfolioA clean portfolio grid of coloured tiles that zoom on hover, with a slide-in side menu. Recoloured in Enrichr greens, violet and terracotta on cream.

FAQ

Is this free for client work?

Yes. HTML5 UP releases it under Creative Commons Attribution 3.0, which allows personal and commercial use as long as you credit HTML5 UP. Keep the credit in the footer.

Did you change the animations?

No. Only colour values changed. The HTML, the jQuery script and every transition are exactly as HTML5 UP wrote them, and we checked that the page behaves the same as the original.

Can I use different colours?

Yes. Edit the colour values in assets/css/main.css. ENRICHR-COLOURS.txt in the zip lists each one we changed, so you can find them quickly.