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 represeting each of the 'frames' in the section:
Remove all the default images by clicking the Delete All button on the right.
Drag new images from your computer into the drag and drop area at the bottom of the FRAMES column, or click it to select images from your computer.
You may choose to add new images one at a time, or select multiple to add them simultaneously.
The images that you add through this process are automatically assigned as landscape (wider than tall) frames. Portrait versions for tall screens will be created by default by cropping the landscape images to their centres. Clicking on the thumbnail images in the bottom row will open up the media dialog for each image and you can choose to pick a 'focal' point for the images, add custom cropped images for portrait screens (you may wish to have a different image appear on tall screens, or a different crop of the same image), as well as add captions and alt text for individual frames.
The image sequence can be re-ordered by dragging the image thumbnails into position in the thumbnail bar::
Click DONE to save the cahnges 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 headings, pull-quotes, hyperlinks and bullet points
Insert media into the text column - including images, video files, SoundCloud audio or YouTube videos - by clicking media between paragraphs. You can also easily attach a link to inline images
Insert HTML between paragraphs by selecting 'HTML'. Embedresponsively.com can help with generating responsive embed code for a number of tools.
Animation effects
Image transition options, available through the 'section options' panel, include a choice of a slow or fast fade between frames, a fade into and out of the background colour between frames, or no transition:
Section options also enable fading in the text column as the section scrolls into view: giving the first image in the section some full-screen tim before the text appears.
Media guidelines
Full-screen landscape image: 2560px wide x 1440px JPEG at 100% quality
Full-screen portrait image: 1080px wide x 1920px JPEG at 100% quality
Prepare and crop images with a text area in mind. 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.
Section Options
Along with the animation options described above, Background Scrollmation sections support options including changing the colour, opacity, and style of the coloured strip that sits between the background image and text:
Changing the style 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.
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.