Scrolly Topper

Scrolly topper example

The scrolly topper offers a way of opening a story with a brief narrative, scrolling blocks of text over one or more images before collapsing and giving way to the article itself. It's good for increasing engagement time and compelling the reader to continue by building suspense, slide by slide.

Configuration

The basic configuration is a single image with a headline, subheadline and label above the headline, followed by a few blocks of text, or "slides," that scroll over the image. 

{​​​​​​​​storyTopper}​​​​​​​​
inDepthTopper: scrollyTopper
{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​}

{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​storyTopper.scrollyTopper.intro}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
superlabel: LABEL ABOVE HEAD
label: Main Title to Scrolly Topper
sublabel: Longer block of text to add context to the title, displayed in smaller font size
image: https://www.gannett-cdn.com/media/.../desktopImage.jpg
{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

[storyTopper.scrollyTopper.slides]
* Block of text to scroll over the intro image ...
* Another block of text to scroll over the intro image ...
[]

Additional configuration options

The topper recognizes breakpoint images in the intro and in the slides. It also can cycle through multiple images configured to change when specific text blocks scroll into view. There are also options affecting design: color, size, position and alignment of text in the introduction and slides, and background color.

Options

Design options

{storyTopper.scrollyTopper}

option purpose required default
theme Options are light and dark, and are independent of the overall page theme. No light
gradient Assign a custom color to the opaque-to-transparent gradient running over the bottom of the background image. If unspecified, the default colors are black for the dark theme and white for the light theme. No Theme-dependent
gradient: off Turn the gradient off. No
slideTextPosition Position the slide text container in a 3 x 3 grid; options are top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center and bottom-right. No bottom-left
slideTextAlign left, center or right alignment of slide text within it's container. No left
slideTextBackground Options are none for no background, or a valid CSS color; defaults to black or white depending on theme. No Theme-dependent
slideTextColor CSS color; defaults to black or white depending on theme. No Theme-dependent

Intro

{storyTopper.scrollyTopper.intro}

option purpose required default
label The main title for the topper. Yes
labelTextSize The relative size of the label: small, medium, large, xl and xxl No medium
labelSerif Options: true or false. Text is serif if true. No false
superlabel A small label head above the title. No
superlabelTextSize The relative size of the superlabel: small, medium, large, xl and xxl No medium
superlabelSerif Options: true or false. Text is serif if true. No false
sublabel Longer text that serves as a subhead on the title slide. No
sublabelTextSize The relative size of the sublabel: small, medium, large, xl and xxl No medium
sublabelSerif Options: true or false. Text is serif if true. No false
layout The position of the title cluster in a 3 x 3 grid; options are top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center and bottom-right. No bottom-left
wide Intro slide text is limited to 50% of the viewport width in desktop views. Setting this to true removes that limit. No false
textColor CSS color; defaults to black or white depending on theme. No Theme-dependent
image Background image; either this or breakpoint images (see next) are required. No
desktopImage, tabletImage, mobileImage, microImage Specify different background images for different screen widths. At minimum, desktopImage and mobileImage are required. See Using multiple images for different-sized devices. No

Slides

[storyTopper.scrollyTopper.slides]

Note the square braces. Each line should start with an asterisk and a space.

content details
Block of text Keep blocks short, no more than a sentence or two: * The quick brown fox ...
Image Prefix a full image url with * image:http://www.gannett-cdn.com/... (colon and no spaces) to indicate that the text in the next line should be accompanied by the present image fading into the new image.
Fixed position Prefix a text block with a fixed-* position (see below) to fade the text in and out in place: * fixed-top-left:The quick brown fox ...
Multiple break point images Same as for a single image, but prefixed with * desktopImage:http://www.gannett-cdn.com/..., etc.

Full sample configuration

{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​storyTopper}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
inDepthTopper: scrollyTopper
{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​storyTopper.scrollyTopper}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
gradient: off
theme: dark
slideTextAlign: center
slideTextBackground: none
{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​storyTopper.scrollyTopper.intro}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
layout: center
superlabel: LABEL ABOVE HEAD
label: Main Title to Scrolly Topper
sublabel: Longer block of text to add context to the title, displayed in smaller font size
desktopImage: https://www.gannett-cdn.com/media/.../desktopImage.jpg
tabletImage: https://www.gannett-cdn.com/media/.../tabletImage.jpg
mobileImage: https://www.gannett-cdn.com/media/.../mobileImage.jpg
microImage: https://www.gannett-cdn.com/media/.../microImage.jpg
{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

[storyTopper.scrollyTopper.slides]
* Block of text to scroll over the intro image ...
* Another block of text to scroll over the intro image ...
* image:https://www.gannett-cdn.com/media/.../image2.jpg
* This block of text will scroll over image3.jpg, specified in the previous line.
* This block has sentences separated by a newline character.\nThey will be broken up into two paragraphs.
* image:https://www.gannett-cdn.com/media/.../image3.jpg
* And this block of text will scroll over image3.jpg, added in the previous line.
[]

Fixed-position slides

As an alternative to text scrolling over an image, you man prefix a block of text with one of nine position options to have it fade in and fade out in place. The options are similar to the fixed positions available in the scroll-interlude component:

Left Center Right
Top fixed-top-left fixed-top-center fixed-top-right
Middle fixed-middle-left fixed-middle-center fixed-middle-right
Bottom fixed-bottom-left fixed-bottom-center fixed-bottom-right

See the demos near the end of in-depth demos.

Analytics

Event Action Category Label
Scrolled to end scrolled to end scroll tracking scrolly topper
Collapsed topper skip intro scroll tracking scrolly topper
Expanded topper reset to top scroll tracking scrolly topper

Examples