SkyTimelapse.com's design and UX strategy overview

Sticky Main Navigation:

The primary header (the main header element) is a sticky header, fixed to the top on scroll. The navigation menu (the main navigation component) is a component managing the open/close state of submenus (the submenus) and the main mobile menu (the mobile menu container). Category links (the day links, dawn links, night links) use CSS ::before pseudo-elements for Font Awesome icons for clear visual identification.

Animated Floating Menu:

A secondary, icon-based menu provides quick access to Portfolio, Info, Contact, and Search. CSS Animation: The icons feature a complex, animated gradient. The keyframe animation scrolls a linear-gradient background across the icon text, creating a shimmering effect. Hover-to-Show Labels: Labels are hidden by default and fade in and slide up when the user hovers over an icon, due to their widespread recognizability, it also works well on screen readers, as labels are intact for them. The mobile menu is also made intentionally colorful based on the three master categories (Day, Night, Dawn and Dusk). The two other featured subcategories Forest and Precipice are intentionally made sub-classes of the main three.

The page uses three separate and distinct auto-scrolling components.

1. Main Hero Scroller (.auto-hero-scroller)

   The page's main feature is a horizontally-scrolling carousel, powered by a dedicated module. On desktop, a special introductory video is attached to the slider's lower-right. The slider is meant to give the end-user high quality imagery right away and with speed buttons that can effectively freeze sliding, pausing it, or speeding it up. The video is a "picture-in-picture" style video overlay.

   The narrated, intro video ‘Endless Skies’ is a visually busy showcase delivered ‘over the top’ from CloudFlare and is meant to quickly preview lots of my footage, with the speed of the timelapses accelerated throughout the video for this purpose. The strategy in the previous iterations that showed my 'Endless Skies' work was to show interesting footage immediately, while also playing muted and automatically.

   • Context-Aware: It uses an IntersectionObserver to track the visibility of the main hero scroller (.auto-hero-scroller).
   • Fixed Positioning: When the hero scroller is in the viewport, the script adds the .is-visible-fixed class, which changes the video's CSS to position: fixed, making it "stick" to the bottom-right corner of the screen. When the user scrolls past the hero slider , the class is removed, and the video disappears.
   • Infinite Loop: The script clones the first slide and appends it to the end to create a seamless, infinite loop.
   • Dynamic Animation: It uses requestAnimationFrame for a smooth, performance-optimized animation, manipulating the transform: translateX() property.
   • User Controls: The scroller features user-facing buttons (#heroSlowDown, #heroSpeedUp) that directly modify the animation's speed variable in the script.
   • Parallax Text: Text elements (.placeholder-text-area) have a subtle parallax effect, moving at a different rate than the background slides (parallaxFactor = 0.14).
   • Optimizations: The CSS class will-change: transform is used to hint to the browser to optimize this element for animation- this helps the browser render the page, helpful for lower end devices that need all the help they can get!
2. Vertical List Scroller (#list-scroller-container)

   Located in the footer, this feature automatically scrolls a long list of tags up and down. Vertical Loop: Similar to the hero section, this script duplicates the list's content to create an endless vertical loop using a CSS transform (transform: translateY(...)). User Controls: It includes controls for adjusting the scrolling speed and direction (buttons: #listSpeedUp, #listSlowDown, #listReverseDirection). Pause on Hover: The script is set up to stop the vertical scrolling animation when the user moves their mouse over the list container.

3. Parallax "Sections" (#parallax-container)

   This feature looks like a scroller but uses a different mechanism. It consists of several full-height sections with fixed backgrounds, creating a parallax scrolling effect. Scroll-Driven Parallax: ‘Monitors’ (this word is used from the browser’s perspective in charge of rendering the page) the user's scroll position and applies a vertical movement effect (transform: translateY(...)) to the text boxes (.placeholder-text-area, .thatdiv) at a speed different from the main page scroll. Visibility Toggle: It uses an IntersectionObserver to detect which section is currently in the viewport. When a section is visible, it adds a .is-visible class to the corresponding text box (.thatdiv), which makes it fade into view.

Global Video Autoplay Toggle:

A toggle switch (#autoplay-toggle) allows the user to enable or disable video autoplay across the entire site for the bottom footer videos, which give a showcase of both day-to-night clips and the whole, seven hundred or so clips in a four-up collage, meant for users to rapidly ingest my footage visually. The user's autoplay preference is stored in local storage under the key autoplayEnabled. Dynamic Player Update: On load and on toggle, the updateAllPlayers script scans the page for all videos (.cloudflare-stream-embed, .mxx). It then dynamically adds or removes the autoplay=true and muted=true parameters from iframe URLs or element properties.

Category Image Hover Effect:

The grid of category images in the footer (.categoriesmain) has a unique CSS hover effect. An overlay div (.overlay) is hidden off-screen and skewed with plain css as it flies in. On hover, a CSS transition moves the overlay into view and "unskews" it at the same time creating a dynamic sliding/unfurling animation.

Viewport Resize Notification:

The page listens for browser resize events. If the viewport width increases by more than 20% (widthIncreaseThreshold = 1.2), a notification (#refresh-notification) appears, prompting the user to refresh. This is to load higher-resolution images that are conditionally served via media queries from the CDN called Cloudflare.

Browser Feature Detection to Notify Lockdown users (A MacOS and iOS security feature) of page breakage:

The page runs a small script (isWasmEnabled()) to check if WebAssembly is supported by the browser. If the check fails, a notification message (#wasm-warning) is made visible for the user to take note of.

How the Layout Changes for Different Screen Sizes (Responsiveness):

For Parallax Effect:

When the screen width is less than 1100px, the fancy "parallax" scrolling effect is completely turned off. The script takes content meant only for desktop, duplicates it, and places it into a separate vertical stack for mobile view.

CSS-Driven Changes (For General Layout):

Navigation: The main menu shrinks into a simple hamburger style, as it is known as, on smaller screens. Portfolio Sections: The project galleries use a CSS grid to adapt: they show as a single column by default, switch to 2 columns on tablets (1024px and wider), and then to 3 columns on very large screens (1536px and wider).

Footer:

On wide screens (1900px+), the footer columns are in one arrangement, but on narrower screens, CSS is used to wrap them and rearrange their visual order to stack them better. Where you see three columns in the footer on a full HD screen, these columns become singular on any device that is smaller (i.e. a lower reported CSS resolution), while rearranging the second column to become the third and last, as it is meant to be the main part of the footer.

This page's user experience is designed for scanning and finding video, exactly like browsing a digital catalog. With roots in a WordPress CMS that used the new block-themes (Gutenberg), I customized it to be visually unique, starting with a blank template so as to not rely on third party design elements outside the basic provided CSS, core to the CMS.

Primary Layout:

• The page uses a two-column layout.
• An informational column on the left (<aside>) immediately sets the context, providing a "Scene notes" description for the entire "Dawn and Dusk" category.
• The main content column on the right (<main>) is dedicated to a grid of video clips.

Content Interaction (Browsing):

• Grid of Previews: The main feature is a responsive grid of multiple video clips (.wp-block-post-template.columns-2) that has special CSS for alternating the background colors to enable easy visual differentation. This allows the user to see and compare several clips at once, and the layout shifts to one video columns on mobile devices.
• Automatic Previews: Each video in the grid is set to auto-play silently on a loop. This provides an immediate, low-effort preview of the clip's content as the user scrolls, which is highly effective for discovery.
• "At-a-Glance" Information: Each clip in the grid is presented with minimal, essential information: a title, a short "Scene notes" description, and a set of clickable tags. This provides just enough context to encourage a title click without cluttering the layout.

Page Navigation:

• Page-by-Page Navigation: At the bottom of the grid, the user is presented with pagination controls (.wp-block-query-pagination). This allows them to navigate between entire pages of clips (e.g., Page 1, 2, 3...), reinforcing the "catalog browsing" experience.

This page's user experience is designed for focused evaluation of a single, selected clip for the viewer to watch.

Primary Layout:

• The page uses a single, centered content column. This removes all distractions and places the focus entirely on the selected video clip.

Content Interaction (Evaluation of clip):

• Main Feature Video: The page leads with a large, prominent video player of the selected clip. This video also auto-plays silently, immediately delivering the content the user clicked to see.
• Alternate Video Source: The page thoughtfully includes a "View with alternate video source" dropdown (<details>). This is a key feature that provides a fallback option in case the primary video player fails to load, ensuring the user can still access the content.
• Detailed Information: The "Scene notes" (.intnotes) are more prominent here, providing a detailed paragraph about the specific clip, its length, and its SKU number.

Page Navigation & Next Steps (in previous iterations):

• Clip-by-Clip Navigation: Instead of page numbers, this page features "Previous Clip" and "Next Clip" links. This is a crucial difference from the category pages, as it allows the user to move sequentially through the category's clips one by one, as if flipping through items in a gallery.

Contextual Links:

• The page provides a bar of contextual links to answer a professional user's immediate questions:
  • A list of clickable tags (e.g., "conifers," "in fog," "light rays") that the clip has as attributes, and selecting a tag will show other clips with that attribute.
  • Links to view in "Full-HD or 4K."
  • A button to download the preview clip in the user's browser
  • Links to "Technical expository," "Pricing," and "Licensing information."

Policy Information:

• The new "Important Public Announcement Regarding Footage Licensing" is included to provide the latest information that is ending new licensing, where old shopping cart buttons used to be.

Beyond the user-facing design, I use a Node.js-based workflow to update and deploy the site, ensuring reliability and performance.

Deployment:

The static, headless CMS site adapted from a traditional WordPress CMS is deployed to Cloudflare Pages using the Wrangler command-line tool. This process is managed by Node.js scripts.

Site Maintenance:

Custom Node.js scripts are used locally for site maintenance (updating site pages when needed). These scripts include utilities to:

• Crawl the site to check for and report any broken links.
• List recently modified files to keep track of changes before deployment.

Video Hosting Strategy:

The site employs a robust, multi-provider video strategy for a seamless user experience:

• Primary CDN (Cloudflare): The main video player on every page streams content from Cloudflare's CDN, which also provides the site's core HTTPS hosting.
• Alternate Host (Fallback): The "View with alternate video source" feature on clip pages loads the video file from a separate, secondary host. This provides redundancy, ensuring the user can still play the video if the primary CDN fails.
• Social & 4K (YouTube): Embedded YouTube videos are used in portfolio sections. This serves a dual purpose: it leverages YouTube's high-bandwidth streaming for 4K content and provides a simple, familiar interface for social media sharing.