A text column backed by full-screen images that switch as you 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. 

https://s3.amazonaws.com/elevio-article-assets/58d9e1d570a32/5912b42062bfd_bgs6.gif

Remove all the default images by clicking the delete all button on the right. Click the drag and drop area to select images from your computer. You may choose to add images one at a time, or select multiple to add them simultaneously.  Or, you can drag one or more images from your computer file system to that area to include them in the section.  

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 the middle. Clicking on the thumbnail images in the bottom row will open up the media dialog for each image and you can choose to add custom cropped images (you may wish to have a different image appear on tall screens, for instance) as well as captions to individual frames.

The image sequence can be re-ordered by dragging the image thumbnails into position in the thumbnail bar:

https://cdn.elev.io/file/uploads/p9jpW4cYPyd717Yrl8GDNdjJSSFuIbXFNYXBroJVATQ/PpcuRMypVlXMuGgSyptieqEZoZN90tHGhlyj6vOspMk/reordering-JaA.gif


Click finished editing to save and return to your story.

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

  • Flipbook style:
    Bring images to life with an animation effect by using multiple related images. Find out more here.
  • Image transitions:
    Use the Section Options to add a slow fade or fast fade transition between your images. This is especially useful to ease the switch between very different images in your sequence
  • Fade in the text:
    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 time.

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

Scrollmation sections support options including, if your theme allows for it, changes to text and background colours. For more, see:
Section Options.