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. Remove all images by clicking the trashcan icon to the bottom right, and click 'Add' to bring in your own.

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

The image sequence can be re-ordered by dragging the image thumbnails into position in the bottom 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 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. Or you can 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.