Skip to main content

Scroll-Expand Media

ShowcaseScrollExpand Interactive Showcase 12 options JavaScript

Hero media that grows from a small card to full screen as you scroll, then reveals body content.

Published · by Christopher Alberto

Live demo

Open full screen

At a glance

Component
ShowcaseScrollExpand
Category
Interactive Showcase
Used as
Page block — “Showcase: Scroll-Expand Media”
Options
12 editable fields
Built with
PHP, Twig, SCSS, JavaScript
Platform
WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

A scroll-driven hero: an image or video starts as a small card and expands to fill the screen as you scroll, while the title splits apart and the background fades — then the body content scrolls in.

Highlights

  • Uses a sticky “pin” inside a tall track — scroll position drives the animation without hijacking the page.
  • Image or video media with a poster, optional background image, and a blend-mode title option.
  • Collapses to a simple layout for reduced-motion visitors.

Options

Editors add this as Showcase: Scroll-Expand Media in a page's components. Every field it exposes:

Option Field Type Details
Content
Eyebrow eyebrow text Default: Sample Eyebrow Small label shown above the media while it is collapsed, e.g. a date or category.
Scroll Hint scrollHint text Default: Scroll to expand
Title * title text Default: Scroll To Expand Split across two lines that pull apart as the media expands. Keep it to two or three words.
Media Type mediaType button group Choices: Image, Video · Default: image
Media Image media image Formats: jpg,jpeg,png,webp
Video video file Formats: mp4,webm Self-hosted video file. Plays muted, looped, autoplaying once visible.
Poster Image poster image Formats: jpg,jpeg,png,webp Shown before the video has loaded.
Background Image * backgroundImage image Formats: jpg,jpeg,png,webp Fills the viewport behind the media and fades out as it expands.
Body Content content wysiwyg Default: Placeholder body content revealed once the media has fully expanded, standing in for real copy. Revealed once the media has fully expanded.
Options
Options options group
↳ Theme theme select Choices: (none), Light, Dark
↳ Blend Title With Media textBlend true false Default: on Applies mix-blend-mode: difference to the title/eyebrow/hint so they stay legible over any media.

Under the hood

Components/ShowcaseScrollExpand/

  • README.md Notes 25 lines
  • _style.scss Styles (SCSS) 197 lines
  • functions.php Fields & data (PHP) 162 lines
  • index.twig Markup (Twig) 72 lines
  • script.js Behaviour (JavaScript) 60 lines

Share this component
Christopher Alberto

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub