063
Optional AI setup

Photographer Template

£10

A photographer website template in a Nordic register: cool near-white paper, one tight grotesk, hairline ruled tables. A quiet hero with one photograph at the edge, six frames in a sideways run driven by scroll, a dark wall of ten prints to scroll, drag and zoom through, a print basket, and a commission table that works out the price as you choose. Suits weddings, hotels, travel, interiors or surf schools.

ScrollTrigger advanced
13 more details
pinningscrubhorizontal-scrolllightboxpointer-effectsclick-statedragzoomkeyboard-navigationparallaxscroll-revealform-validationtoken-theming
Photographer Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab
Open Photographer Template demo in new tab

About this template

A complete one-page site for Mara Venn, a landscape and assignment photographer in St Ives, written in a Nordic register: cool near-white paper, a single tight grotesk set sentence case, hairline rules and tables that state their facts with a small label above a plain value.

Read the full template overview

The page opens on a quiet paper field with one headline and a single photograph at the edge, read in a fact table of frame, season and base. Below it, six frames ride one sideways run driven by scroll, each with an order button; then every print hangs together on one dark wall to scroll, drag and zoom through; and the commission section is a table you fill in. Shoot, days, season, extras. It works out the price as you choose.

Everything is static HTML, CSS and one script: no build step, no framework, one typeface from Google Fonts. Drop your own photographs into assets/img and rewrite the copy; each section is independent, so any of them can be deleted without touching the JavaScript, and without JavaScript the sheet is a scrollable rail and the form is a plain set of fields.

What's included

10 items
  • Complete one-page photographer site you can publish as it is: quiet hero with fact table, sideways contact sheet with viewer and order buttons, dark wall of ten prints with drag and zoom, facts about the photographer, editions table with print basket and a commission form that works out the price, and footer
  • Contact sheet: scrolling moves sideways through a pinned section past six frames. A counter tracks progress, and every frame has an order button that adds to the basket
  • Viewer for any frame or wall print, with camera settings, arrow-key navigation and a count. The rail scrolls normally with JavaScript off
  • Commission form as a ruled table: shoot, days stepper, season and extras update a live estimate with a written summary. Real radio buttons and checkboxes underneath keep it working as a plain form
  • Wall: ten prints at mixed sizes on one dark ground. Scrolling moves across it through a short pinned section, dragging pans, zoom controls go to 180%, every print opens the viewer, and a small prompt invites the first drag
  • Page ground that shifts tint as you scroll. The wall arrives paper and darkens to ink as you reach it, then lightens again as you leave. Static paper without motion
  • Nordic chrome: cool near-white paper, ink, one fjord accent for numerals, rules and selected states; Inter Tight throughout, headlines medium and sentence case
  • Eleven WebP photographs with a light grade baked in, about 1.4MB in total, with a manifest so you can regenerate them from your own photos
  • Reduced-motion and no-JS versions: no pinned sections, the sheet scrolls, the builder adds up without counting, nothing hides
  • Lenis smooth scrolling wired in and fully optional

Perfect for

5 use cases
  • Photographer portfolios: landscape, wedding, editorial and assignment shooters
  • Hotels, holiday lets and travel pages that sell on full-bleed place photography
  • Interiors studios and makers presenting a short run of visual work
  • Print sellers needing an editions table with an enquiry flow
  • Any image-led one-page site where the photographs must carry the page

How it works

5 sections

Structure

One script gives every section its own setup routine with a single cleanup path, and any section whose markup is missing is skipped, so buyers can delete sections freely. A synchronous head script adds a class before first paint so the reveal states apply without a flash, and the main script removes it again when the CDN is blocked.

The lateral sheet

The six frames sit in one wide rail, and a scrubbed tween carries the rail sideways while the section is pinned. Normal scrolling walks through frame by frame, and only a fast flick skips the lot. A counter turns the scroll position into a frame number. Without the pin, the same markup is an ordinary scrollable rail with snap.

The builder

The shoot, season and addition cells are real radio inputs and checkboxes dressed as table cells, so the table submits as a plain form with JavaScript off. With it, every change recomputes the estimate from the day rates and rounds to ten pounds, then counts the figure to its new value and rewrites the summary sentence in plain words, including a fuller booking phrasing at the top end.

Light and quiet

The hero photo settles out of a slow zoom, moves with the scroll and tilts towards the pointer on both axes. The wall is the one dark area on the page. Ten prints sit at mixed sizes while the rest of the page stays paper, ink and fjord. The page ground breathes as you scroll: each section carries a slightly different paper tint, and the wall itself arrives paper and darkens to ink as you reach it.

Without JavaScript or motion

Without the script the page is a plain document. The hero is a headline with a photograph and a fact table, the sheet is a scrollable row of captioned frames, the wall is a static mosaic on its dark ground, and the builder is a form with its rates listed beneath it. Under reduced motion there are no pinned sections, the viewer opens with no flight, the wall keeps its zoom but stays still, and the builder adds up without counting.

Plugins ScrollTrigger
Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Questions about this template

What else does this design suit besides a photographer?

The page is a quiet paper layout with a fact table, a sideways sheet, a dark wall of prints, a basket and an estimate form, so it becomes a wedding photographer, a hotel or holiday let, a travel journal, an interiors studio or a surf school with only the copy and photographs changed. The first question below is answered for a photographer, but the layout never mentions photography in its structure, only in its words.

How do visitors browse the contact sheet?

By scrolling. The page pins and the sheet travels sideways past six frames, with a counter tracking progress, and clicking any frame opens it bigger with its camera settings. Arrow keys move between frames inside the viewer and Escape closes it. With JavaScript off the six frames sit in a plain rail you can scroll, so no photograph is ever stuck behind the interaction.

Can I sell my own print editions through the table?

Yes. The editions table is plain markup: change the names, sizes, runs and prices to yours and the page reflows. There is no checkout behind it, so point buyers at your existing shop, a payment link, or the estimate form below it and fulfil the order yourself.

How does the commission builder work?

Pick the shoot, the days, the season and any extras and the table works out its own estimate, counting to the new figure and rewriting the summary in plain words. It is an estimate, not a quote: Mara confirms every figure by email. The rates are ordinary form controls underneath, so with JavaScript off it still reads and submits as a plain form. Nothing is sent anywhere until you point it at Formspree, Netlify Forms or your own inbox.

Will my own photographs work across the page?

Replace the files in assets/img or edit the source URLs in assets/img-manifest.json and re-run the bake command in the README. The grade is baked into the pixels, so mixed sources read as one set, and the total ships at about 1.4MB. Keep wide photos at 1600 pixels or more or they soften on large screens; small tiles are baked at 800.

Can I drop the sideways sheet if I only shoot one subject?

Yes, every section is independent. A photographer with one series can keep the hero, the wall and the estimate form and delete the sheet, and the navigation, menu and footer keep working. The script skips any section it cannot find.

Paid template

Purchase to unlock the code.

Buying Photographer Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

Open index.html in a browser, or serve the folder statically. No build step, no framework. CDN scripts for GSAP 3.15.0 (core + ScrollTrigger) and Lenis 1.3.17; the page degrades to a plain readable document if they are blocked.

Sections (each independently deletable)

  • Hero (data-hero) — paper field, plain headline, one photograph at the edge, the frame read in a hairline fact table.
  • Contact sheet (data-strip) — six frames in one sideways run. Scrolling moves through a pinned section with direct scrub; a counter tracks progress. Click any frame for the viewer with camera settings, arrow keys move between frames, Esc closes, and every frame has an order button that adds to the basket. Without JavaScript the rail scrolls normally with snap.
  • Wall (data-wall) — ten prints at mixed sizes on one dark ground. Scrolling moves across it through a short pinned section, dragging pans, zoom controls go to 180%, every print opens the viewer, and a small prompt invites the first drag. Static mosaic without JavaScript or motion.
  • About (data-about) — two-column statement and a ruled facts table, portrait at the edge.
  • Prints (data-prints) — editions as a ruled table, then the estimate form: shoot, days stepper, season and extras update a live price with a written summary, then name, email and submit returns a reference number. Real radio buttons and checkboxes underneath keep it a working plain form with JavaScript off. Nothing is sent anywhere until you point it at Formspree, Netlify Forms or your own inbox.

Delete any <section> and the rest keeps working; the nav, sections overlay and footer do not depend on section scripts.

Palette

Paper #FAFAF8, card #FFFFFF, ink #131313, fjord #2F454B. Repaint those four values at the top of assets/style.css and the site reskins. Every translucent value resolves from the --*-rgb triples. Measured pairs: ink on paper 15.8:1, dim body variant 6.5:1, faint meta 4.7:1, fjord on paper 8.4:1 (numerals, rules, selected states; paper on fjord the same reversed for selected type). Fjord never washes a photograph.

Type: Inter Tight throughout. Medium sentence-case headlines, plain small labels. Swap the single --font-sans token to re-voice the page.

Images

Bundled photos are optimised WebP files (assets/img/, about 1.4MB total), graded as one set from Pexels sources. The originals are never redistributed.

Accessibility

Keyboard: every frame, viewer control, builder control, menu control and field is reachable; arrows move through the viewer, Escape closes viewer, menu and basket. Reduced motion gets no pinned sections, a resting hero, a viewer with no flight, a static wall mosaic with working zoom, and a form that adds up without counting. The basket, the wall drag and the zoom are click-state, so they work in every motion branch. Without JavaScript: headline with photograph and fact table, a scrollable captioned rail, four stacked prints, the editions as a plain price table, and the form as a plain set of fields with its rates listed.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Every effect, template and UI element: 165 today, plus everything we release next.

Or browse effects, templates or UI elements.