Scroll-driven hero and pinned scenes
Desktop-only scroll scrubbing and pinned sections for the fleet and services, with plain vertical equivalents on mobile and for reduced-motion visitors.
Trucking and equipment hauling
A.F. Trucking & Transport
Online as AF Hauling — Equipment Transport
A.F. Trucking & Transport Ltd, presented online as AF Hauling, moves heavy equipment, gravel and aggregate for paving crews, crane operators, rental fleets and general contractors across Alberta. The site needed to make one thing obvious to a contractor on a phone at a job site: the trucks are real, they are available, and here is how to get one.
The brief
What the website
had to do.
The company had strong raw material, real photographs of its Peterbilt end dumps, Mack tractor and step-deck trailers hauling pavers, cranes and excavators, but no website at all. The brief ruled out fabricated numbers, client logos or years-in-business claims that could not be backed up, so the design had to earn trust purely through the real photography and a clear, blunt structure.
- Answer availability, services, coverage area and how to book above the fold.
- Treat the phone as the primary device, because the customer is usually a contractor on site.
- Show the actual fleet and actual loads instead of stock imagery, with no invented claims anywhere on the page.
Design approach
How we
built it.
- A "dispatch ticket" concept: the page reads like one working day, from first light to the last lift, and every chapter label, spec card and the request form is styled as a job ticket. The storytelling device and the lead-generation device are the same thing.
- A scroll-scrubbed hero on desktop with a pinned fleet section and a horizontal run through the four services, all disabled automatically for visitors who prefer reduced motion and replaced by simple vertical sections on phones.
- Photography treated as the proof: a night-paving aerial as the centrepiece, fleet units with spec cards, and job photos presented as tickets.
- Owner-supplied dispatch phone and email wired into tap-to-call buttons in the header, hero and contact band.
What's on the site
Built for the people
who use it.
Fleet section
Each unit with its own spec card: tandem end dumps, tri-axle step decks, highway tractor.
Four services
Equipment hauling, gravel and aggregate, paving support, site moves and freight, each with a real job photo.
Alberta coverage
An animated Alberta map with route lines, stating Alberta-wide coverage without inventing a home city.
Dispatch request form
Name, company, phone, email, job location, what is being hauled, date and number of trucks, composed as a job ticket.
Careers page
A driver application for Class 1 and Class 3 licence holders with a resume and abstract upload path, and the equipment, work, coverage and season laid out plainly.
The finished website
Straight from
the live site.
Real screenshots, not mockups. Open the live site to see it move.
Under the hood
What was
delivered.
- Static multi-page site (home and careers), hostable anywhere
- GSAP ScrollTrigger scenes with reduced-motion fallbacks
- Self-hosted fonts, no third-party font requests
- Tap-to-call and email wired from a single owner-supplied constant
- Single-file standalone builds for portability
- Custom domain and SSL
Your business next
A site like this,
built before you pay.
Send your business name. Within 48 hours you'll be looking at your finished website. If you want it, it's $599.99 up front + $19.99/mo, and we handle everything after launch.
Or text or call (587) 883-1149 · support@hypersites.work
More work
All projects →