Scroll interlude example

Scroll Interlude

The scroll interlude component pauses an image or video when it scrolls into view and holds it there until a configured number of paragraphs from the article — or configured text — scroll over the top of it, after which normal scrolling of the article resumes. The component can be configured to use an image or video in the story, or it can target a Presto asset — image, video, embed — or chapter header for replacement by one or more images or videos on the CDN. Text can be aligned left (default), center or right. The config can also specify a header (defaulting to the chapter header if applicable) and a caption and credit for the media.

Options

option purpose required default
storytellingComponent Must be set to scrollInterlude Yes
image/video A url to the image(s) or video that will serve as the background for text to scroll over OR a list of images to cycle through during scrolling. Yes None
[.images/videos/media] A wrapper around blocks describing multiple images, videos or a mixture of both. (See below) Yes None
graphCount The number paragraphs for the component to "swallow" from the article text. For the multi-image variation of the component, the graphCount values paired with the images are totaled up to determine how many paragraphs are consumed — or you can use a global graphCount value and the component will divide that by the number of images. Yes None
textPosition Blocks of text can scroll over the left third, center third or right third of the image or video, or they can fade in and out in any of nine spots on a 3 x 3 grid. No scroll-center
header If targeting a chapter header, the component will use the chapter header text by default, but it can be overridden or added when targeting an image or video asset. No
headerPosition Use this to override textPosition or its default value of scroll-center. No
layout Two options: "side-by-side" and "side-by-side-text-left" to size the image to half the width of the viewport and run the paragraphs to the side. Both side-by-side layouts revert to overlay at mobile widths. No overlay
caption A caption for the background image or video. When the component is configured on an image asset, this will default to the asset's caption. To suppress it, include the option with no value. No
credit A credit for the background image or video. The same caveat for captions applies. No
textAlign Each paragraph is wrapped in a transluscent box horizontally centered in the viewport and can be aligned "left", "center" or "right" within the box. No left

Single image or video

The basic configuration for the component is a single image or video and a graphCount value. If the configuration targets an image asset, the image option can be omitted, which will cause the component to use the targeted asset. If the component is configured on a chapter header, the image or video option must be specified.

Example single image configuration

{assets.478574398}
storytellingComponent: scrollInterlude
image: https://www.gannett-cdn.com/path/to/image.jpg
graphCount: 3
{}

Multiple images and videos

Multiple images or videos (or a mixture of both) can be configured to change the background image as the user scrolls. A prior version of the component required using the [.images] option and a series of image: <url> and graphCount: <number> pairs for each image, and that will still work, but the preferred configuration now is to use [.media] with blocks of type: <image|video>, url: <url> and graphCount: <number>, all of one type or a mixture of both.

Example mixed media configuration

{chapters.3}
storytellingComponent: scrollInterlude

[.media]
type: image
url: https://www.gannett-cdn.com/path/to/image1.jpg
graphCount: 2

type: video
url: https://www.gannett-cdn.com/path/to/video1.mp4
graphCount: 3

type: image
url: https://www.gannett-cdn.com/path/to/image2.jpg
graphCount: 2
[]
{}

Specify the text in the config

As an alternative to consuming paragraphs from the article body, you can specify blocks of text directly in the config using the [.graphs] option. The text can include links and italicized text using markdown. Individual lines must start with an asterisk, and since graph count is determined by the number of lines in the config, you can skip the graphCount field. Be sure to close each [.graphs] group with [].

Example configured graphs

{assets.123456}
storytellingComponent: scrollInterlude

[.media]
type: image
url: https://www.gannett-cdn.com/path/to/image1.jpg
[.graphs]
* This ia the [first block](https://www.usatoday.com/storytelling/my-story/) of text over the this image.
* This is the _second block_ of text over the this image.
[]

type: video
url: https://www.gannett-cdn.com/path/to/video1.mp4
[.graphs]
* This ia s block of text over the video.
[]

type: image
url: https://www.gannett-cdn.com/path/to/image2.jpg
[.graphs]
* This ia the first block of text over the this image.
* This is the second block of text over the this image.
[]

[]
{}

Text Position

The textPosition option determines whether a text block scrolls over the image or video or fades in and out in a fixed position. It only applies in full-width layouts; side-by-side layouts will ignore the option.

Scrolling positions

value purpose
scroll-left The block scrolls over the left third of the image or video.
scroll-center The block scrolls over the center of the image or video. This is the default value.
scroll-right The block scrolls over the right third of the image or video.

At mobile widths, blocks scroll in the center for all three values.

Fixed positions

Similar to the headlinePosition option in toppers, text blocks can be positioned in one of nine spots using a hyphen-separated pair of the following keywords, prefixed by fixed-:

textPosition: fixed-top-left would anchor a block on the left side of the viewport, at the top. The order doesn't matter. textPosition: fixed-left-top, or just textPosition: top-left yields the same result.

At mobile widths, blocks will respect the verticle part of the option but render centered horizontally for all values.

Text position scope

Where the option is applied determines how many blocks it affects, allowing varying text positions down to each individual paragraph. The three basic scopes are:

At the component level, meaning it affects all of the graphs that will appear

{chapters.2}
storytellingComponent: scrollInterlude
image: https://www.gannett-cdn.com/...
graphCount: 4
textPosition: scroll-right
{}

At the media level, meaning it will affect all of the graphs that appear with a given image or video

{chapters.2}
storytellingComponent: scrollInterlude
[.images]
image: https://www.gannett-cdn.com/.../image1.jpg
textPosition: fixed-top-left
graphCount: 2

image: https://www.gannett-cdn.com/.../image2.jpg
textPosition: fixed-bottom-right
graphCount: 2
[]
{}

At the graph level, meaning it will set the position for just that one graph

{chapters.2}
storytellingComponent: scrollInterlude
[.media]
type: image
url: https://www.gannett-cdn.com/...
textPosition: fixed-top-left
[.graphs]
position: fixed-top-left
position: scroll-center
position: fixed-top-right
position: fixed-bottom-right
[]
[]
{}

Note that when the [.graphs] option is used, graphCount is ignored. The number of graphs that will be pulled from the article for that image will be equal to the number of position: lines, i.e. four in our example. And just as the [.graphs] option was used to specify the text in the config, so too can it be used with position; simply add a text: line for each position: line.

[.graphs]
text: This is a block of text.
position: fixed-top-left

text: This is another block of text.
position: fixed-top-right
[]

Multiple images in the Presto story

When viewed on distributed platforms such as Apple News or Google AMP, the scroll-interlude component doesn't render, which means that images specified in the config, specifically in a multi-image scroll interlude, don't appear. A work around to this is to include the images in the story in Presto, positioned above the paragraphs you want to scroll over each image, then configure the component on the first image asset using these options:

value purpose required default
storytellingComponent scrollInterlude, as before Yes None
imageCount The number of consecutive images the component should consume. The component will consume the paragraphs between the images, scrolling them over each preceding image. Yes None
lastImageGraphCount This value tells the component how many paragraphs after the last image should be pulled in to scroll over the image. Yes None

Responsive images

Sometimes an image that works on desktop doesn't work on a mobile screen. The responsive version of the component allows for different images at different screen widths. It works in nearly identical fashion (images only for now) with a couple of configuration tweaks:

value purpose required default
storytellingComponent scrollInterludeResponsive Yes None
responsiveImages Use this option whether you're configuring one or multiple images. Each responsiveImages block should have a mobile, a desktop, and optionally, a tablet option pointing at an image on the CDN. An alt value should also be included for screen readers. Yes None

Example responsive configuration

{chapters.3}
storytellingComponent: scrollInterludeResponsive

[.responsiveImages]
desktop: https://www.gannett-cdn.com/path/to/desktopImage1.jpg
tablet: https://www.gannett-cdn.com/path/to/tabletImage1.jpg
mobile: https://www.gannett-cdn.com/path/to/mobileImage1.jpg
alt: This is the first image
graphCount: 2

desktop: https://www.gannett-cdn.com/path/to/desktopImage2.jpg
tablet: https://www.gannett-cdn.com/path/to/tabletImage2.jpg
mobile: https://www.gannett-cdn.com/path/to/mobileImage2.jpg
alt: This is the second image
graphCount: 1
[]
{}

Examples