Six Flags Fright Fest
An annual spook-tacular event that takes place at Six Flags Theme Parks
Web Design Goals
- Highly image driven, to give each park the power to control their own visual language
- A multisite experience for all 13 Parks that are involved in Fright Fest
- A one-page scrolling micro-site to minimize outbound traffic and bounces
- 6 sections of quick, concise sections
- Delightful and meaningful interactions
- A useable, and easy to read pricing table
- A Fixed Scrollspy Navigation
- Advanced Custom Fields for easy content editing
- Leverage a CDN for assets and utilize Trellis’ FastCGI Caching
AJAX lazy load content on scroll
- A dead-simple 404
- A gallery, Slick Slider and an accordion (by yours truly)
background-blend-modewhere IE won’t break everything
- 5MB bandwidth budget (before the autoplaying YouTube video)
Fixed Scrollspy Navigation
As a user scrolls, the navigation highlights what section is currently in the viewport.
Autoplay Hero Video
Not exactly bandwidth friendly, but luckily it doesn’t autoplay on mobile. The Slider Revolution plugin made this feature super easy to implement.
Hero Tile Repeater
The park editors can add as many tiles as necessary (2–6) and a park has an odd amount, the last column defaults to a full-width, so no blank spaces, yay for bitwise operators!
The accordion displays thumbnail windows of artwork that reveals more information when the
:hover pseudo-class is activated.
A Classic Gallery
A simple gallery, forked from the Magnific Popup Plugin.
I wanted to show information for all the Shows at Fright Fest but it was a lot of copy to take in at once. I figured defaulting the opacity to 0 and reveal on hover would have a more impactful experience. However, all the cards information are visible on mobile.
A Useable Pricing Table
There are a ton of product options for consumers at each park. Like Disney, Thorpe Park, Cedar Fair and many many other theme park companies — Six Flags uses Accesso to manage virtual queueing and attraction ticketing. So we integrated Accesso ticketing into the pricing table call-to-actions on main products and promos.
Similar to the pricing table, but the hierarchy of space and form separates itself from the main hero pricing table.
It really is the last carousel you’ll ever need.