A text column backed by full-screen images that switch as readers scroll.
The Background Scrollmation section features a text column and one or more full-screen background images which change as the reader scrolls.
To edit the images, click the green image icon in the top-left corner of the section:
A "FRAMES" panel will open on the right-hand side of the Editor, showing a thumbnail image representing each of the 'frames' in the section. In a Background Scrollmation section, the frames are the images that will fill the screen behind the single column of text.
Remove all the default images by clicking the Delete All button at the bottom-right of the panel.
Drag new images from your computer into the drag and drop area at the bottom of the column, or click it to select images from your computer.
Alternatively, click any of the thumbnail images in the panel to open the media modal for that frame, in which the image can be changed, a portrait crop or alternate image supplied, and captions and alt-text may be added.
The image sequence can be re-ordered by dragging the image thumbnails into position in the thumbnail bar:
Click DONE to save the changes you have made in the FRAMES panel and return to the main Editor interface.
In this section you can also:
Move the column of text to the right, centre or left of the screen
Toggle between a light or dark version of this section type
Highlight any text to apply formatting including heading style, pull-quotes, hyperlinks and bullet points
Insert media, buttons, lines, tables, and more into the text column
Insert HTML between paragraphs if your plan supports custom code.
Section Options
Background Scrollmation sections support various options including scroll effects, changing the colour, opacity, and style of the coloured strip that sits between the background image and text:
Changing the style and opacity of the text column
...and changing the padding that controls how close the content of the section can appear to the section top or bottom. This can be set to small, medium, or large.
Scroll effects
The SCROLL EFFECTS section of the of the Section Options panel provides some options for how the text and images animate and transition when the reader scrolls from one image frame to the next.
The BACKGROUND setting some different options for how the background images fade between frames. You can choose between a slow or fast fade between frames, or a hard fade into and out of the background colour between frames, or no transition.
NOTE: The Slow fade option is most appropriate for when each frame includes a distinct image from the previous frame. If you use Slow fade with a series of images that are holistically the same but each image builds or removes some elements from the previous image (e.g. a timeline), then the transitions may appear more as a flicker that can make the flow seem less natural.
Setting the TEXT option to IN will fade in the text within the text column as the section scrolls into view. Enabling this option gives the first image in the section some full-screen time before the text appears.
Media guidelines
Full-screen landscape image: 2560px wide x 1440px
Full-screen portrait image: 1080px wide x 1920px
Prepare and crop images considering where the text column will be positioned. You can toggle a filter from 0-100% to darken your background media in the section and help your text stand out
Images will be automatically cropped to the centre on portrait screens. You can also choose to set a focus point that isn't the centre, or upload a different image to be shown on portrait screens
Use our image templates for safe area guides to ensure no detail is lost in cropping
Shorthand will automatically compress JPG images for multiple device sizes.
Inline image: The widest inline images will appear is 638px, so anything that size or wider will sit to 100% of the text column. Apart from in tablet portrait view, when inline images are shown at 110% the width of the text column.
If you have limited text, you may only be able to use one image in Scrollmation sections. Experiment with the number of images until you are happy that they don’t change too rapidly when reading the story.
Removing background images
If you decide after creating a Background Scrollmation section that you would prefer that it didn't have background images, it's simple to convert it into a Text section. A button in the top-left corner of the page provides the option to "Delete background media". Once this action is performed, the section will have all the attributes of a Text section.