Parallax Scroll Template
A nature-led one-page site for a national trail, outdoor brand or landscape project: four full-bleed photographs pinned into a scroll-scrubbed journey, a live type specimen you type into, and a lens that samples the palette off a hillside.
About This Template
Wending is a complete one-page site for a long-distance trail, told the way a brand foundations site tells a type system: one word at fifteen viewport-widths, bracketed labels, a cool mist ground alternating with a near-black field, and photography that runs edge to edge rather than sitting in frames. It is not built for one business. The fiction is a coast-to-summit national trail, and the same page reskins to an outdoor brand, a national park, a landscape photographer, a conservation trust or an expedition with the copy and the twelve photographs changed.
Read the full template overview
Three interactions carry it, each on a different input. Scrolling walks four full-bleed chapters through one pinned frame: the next photograph settles over the last as it drifts away, the chapter name rises through its mask, the altitude and the mile count up, a route line at the foot draws to the next stop, and at the summit the frame whites out to the page ground. Typing sets your own words in the trail's typeface at display scale, with the variable font's width and weight axes on tabs, the size fitting the line and the photograph behind darkening as it fills. Pointing a lens at a photograph of a headland samples the pixel under it live into a swatch with its hex, with five named points on the hillside to jump to.
Everything is static HTML, CSS and one script: no build step, no framework, one typeface. Repaint the five values in the token block to reskin it, drop your own photographs into assets/img, and rewrite the copy. Every section is independent, so any of them can be deleted without touching the JavaScript, and without JavaScript at all the four chapters stand as four full-height panels.
What's Included
- Pinned four-chapter journey: full-bleed photographs scrubbed through one frame with masked chapter names, a live altitude and mile counter, a drawing route line and a whiteout to the page ground at the summit
- Live type specimen: a contenteditable line at display scale with the variable font's width and weight axes on tabs, size that fits the line as you type, and a shuffle of lines from the brand
- Colour lens: a pointer-driven lens samples the photograph beneath it into a swatch with its hex and a name, drifts home with an elastic settle, and jumps to five named points from chips or the photograph itself
- Scroll parallax across an offset six-frame photography grid, one frame bled off the edge
- Type is the composition: one variable family (Mona Sans) at a 16:1 ratio between display and fine sizes, bracketed labels and a two-word nav whose Index opens the site map as a full-screen overlay menu
- Twelve baked WebP photographs, graded as one set, 1.5MB in total, with a manifest to regenerate them from your own
- Cool mist ground and near-black field with every translucent value mixed from RGB triples, so a reskin is a five-value edit
- Designed reduced-motion page: the journey lays out as four stacked full-height chapters, the lens and chips still sample, the tabs still set the axes
- Readable with JavaScript disabled or the CDN blocked, every chapter, table row and caption included
- Lenis smooth scroll wired on the shared GSAP clock, opt-out per page or per URL
Perfect For
- National trails, long-distance paths and outdoor route guides told chapter by chapter
- Outdoor and landscape brands whose product is a place rather than an object
- National parks, nature reserves and conservation trusts with strong photography
- Landscape and travel photographers presenting a single body of work as a journey
- Brand foundations and design-system microsites that need a type specimen and a palette page with real interaction
- Expedition, retreat and slow-travel projects that sell time in a landscape
How It Works
Structure
One script, one gsap.context, one init function per section, each returning early when its markup is absent, so any section can be deleted. A synchronous head script adds .has-js before first paint so the reveal gates apply without a flash, and the main script removes it again if the CDN is blocked. The nav is in the flow at the top of the page rather than fixed, so it never sits over a chapter photograph; its Index link opens the site map as a full-screen overlay, with focus moved in and back out, Escape to close, and the footer carrying the same list for visitors without JavaScript. In-page links are scrolled by the script rather than the browser, because a native hash jump to a pinned section lands at the pinned element's current position, not the section's start; the chapter rows carry data-jump-chapter so each lands on its own chapter.
The journey
The four chapters are complete panels in the markup: a full-bleed photograph, a name, an altitude, a mile and a paragraph each. With motion allowed the script adds a stage class that stacks them into one 100vh frame, pins the section, and drives one scrubbed timeline with a unit per transition. Each unit moves the leaving photograph up and out at a larger scale, fades the arriving one over it while its scale settles, masks the old name out through the top and the new one in from below, tweens a counter object for the altitude and mile, and extends the route line's x2 to the next stop. A final 0.7 of a unit scales the last photograph while a mist-coloured layer fades to full, so the unpin lands on a page the same colour as the frame. The pin is budgeted at 0.85 viewports per transition.
The type specimen
The line is a contenteditable paragraph. On input the script counts characters, fits the size (full size to 26 characters, then shrinking on a square root down to a third of the base) and darkens the photograph behind in proportion, all through one tweened state object. The width and weight tabs tween two custom properties, --wdth and --wght, which font-variation-settings reads, so the variable font moves smoothly between Narrow and Wide or Light and Bold rather than snapping. Paste is forced to plain text, Enter is swallowed so the line stays a line, and the tabs support arrow keys.
The colour lens
The photograph is drawn once to a hidden canvas at natural size. The lens position is a fraction of the field held in a small object that a short overwriting tween eases toward the pointer on fine devices, and every update maps that fraction back through the object-fit cover crop to a pixel, averages a 13-pixel block around it, and paints the result into the swatch through a tweened RGB object. Leaving the field lets the lens drift back to the last named point on an elastic ease; a tap or click moves it; the chips and the buttons on the photograph jump to fixed points. If the canvas is tainted by a cross-origin image the chips fall back to their stored hex values.
Without JavaScript or motion
Without the script the page is a plain document with the four chapters stacked as four full-height panels, the specimen showing its sample sentence, and the swatch painted with the first named colour. Under prefers-reduced-motion the CSS restores every gated element and keeps the stacked chapter layout, the matchMedia branch skips the pin, the parallax and the hero timeline, and the specimen tabs and the colour chips still work with their changes applied instantly.
Questions about this template
It's a walking trail in the demo. What else does this design suit?
Anything sold on a landscape and photography rather than a product: an outdoor clothing brand, a national park, a conservation trust, a retreat, an expedition, a landscape photographer's portfolio. The fiction is four chapters of a trail, but the chapters are just four photographs with a name, a number and a paragraph each, so they become four collections, four seasons, four regions or four projects by editing the text. Nothing in the layout says 'trail' except the words.
Can I use my own photographs, and what happens to the twelve included?
Yes. The twelve are graded WebP derivatives of Pexels photographs, bundled for the demo, and you can ship them or replace them. Drop your own files into assets/img with the same names, or edit assets/img-manifest.json with your sources and run the bake script to get matched, optimised WebP with one grade across the set. Full-bleed chapter images want to be about 1920 pixels wide; the grid frames 900 to 1200.
How do I change the four chapters, or have three or five?
Each chapter is one article block in index.html with its photograph, name, altitude, mile and paragraph. Copy or delete a block. The pin length, the counter, the route stops and the whiteout all read the number of chapters and their data-alt and data-mile values, so there is nothing to retune. Three chapters is the fewest that still reads as a journey; six is the most before the section becomes the longest stretch of the page.
Does the typing section work on a phone?
Yes. It is an ordinary editable line, so the keyboard opens when it is tapped, the size fits the text as it is typed, and the width and weight tabs are buttons large enough for a thumb. The five named colours in the colour section work by tap, and a tap anywhere on the photograph moves the lens and samples there. Only the follow-the-cursor behaviour is reserved for a mouse.
Can I change the typeface, given the whole page is built on one?
You can, but pick a variable font with a width axis if you want the Narrow and Wide tabs to do anything; without one they still work as weight tabs and you can delete the width row. Mona Sans is loaded from Google Fonts with both axes in one request. The page runs on the ratio between the largest and smallest sizes rather than on any face in particular, so a different grotesk or a serif keeps the composition.
Is there any form, booking or shop to wire up?
No. There is no form on the page at all, so nothing submits to nothing. The footer links to 'Plan a walk', 'Bothies' and 'Tide tables' are placeholders pointing back to the top; point them at your own pages, a booking tool or a PDF. If you add a contact form it will need a handler such as Formspree or Netlify Forms, because this is static front-end only.
How do I recolour it?
Five values in the token block at the top of style.css: the mist ground, the dark field, the ink, the chalk and the one green, each with its RGB triple beside it. Every rule, scrim, dimmed label and focus ring is mixed from those, so nothing is left in the old colour. The contrast figures for each pair as used are written in the same comment, so if you lighten the ground you know which alpha to raise.
