Using a background scroll speed for background images is a great way to make your content more engaging. This article shows you the different background scroll effects and how to use them in your Doc.
💡 This effect is also known as the "Parallax Effect" or "Floating Text".
In this article
🎥 Watch our 3-minute video on this topic.
Why would I choose a scroll speed?
Changing the background scroll speed allows you to put focus on a certain area of the page, whether it's the background image itself or the element that sits on top of the image. Having a moving image is engaging to the viewer to break up lengthy content on a page.
⚠️ Important to know: Using these settings can be a great way to spruce up your content! However, this effect takes a lot of calculation power from your reader's device. For that reason, it's best to be mindful of the number of times you use this effect in your Foleon Doc. Extensive usage could result in inconsistent performance or unexpected behavior.
Where can I change this setting?
In the Foleon Editor, navigate to the Foleon Doc you want to update, then navigate to the block you want to change. From here, when you hover over the block, you'll see the block settings "wheel" icon.
💡When you're working with the Content Builder, it's not possible to add background scroll effect to your block.
Alternatively, you can access the background settings directly by clicking the change background image thumbnail in the block settings bar.
Next, in the block settings, navigate to the background section, where you can update the background colour, type, image, and of course, the scroll speed. Here, you can choose from normal scroll, slow, slower, even slower, and no scroll.
💡These settings can only be used in blocks on pages, not on overlays.
Background settings
With the setting "Background color", you are able to apply a color overlay to place on top of your background image.
⚠️ Setting a background color, in combination with a scrolling option applied to a background image, makes the following warning message appear in the editor: "With this combination of background settings, unexpected behavior can occur".
This combination of settings takes a lot of calculation power from your reader's device, which might result in inconsistent performance or unexpected behavior. Please be aware of this when you create your content so that you don't have any issues in the editor and live version of your Foleon Doc.
Furthermore, it's only possible to apply the "Background scroll speed" effects to background images, not background videos.
Different scroll speeds
Below you can find some examples of the different scroll speeds in action.
The examples that are shared below use this combination of settings, which might result in inconsistent performance or unexpected behavior. Please be aware of this when you create your content so that you don't have any issues in the editor and live version of your Foleon Doc.
⚠️ Setting up multiple blocks with a fixed background, with the same background image on each block, with a scrolling option applied, makes the following warning message appear in the editor: "With this combination of background settings, unexpected behavior can occur".
-
Example 1 — No scroll background into normal scroll
In this example, you'll see the background image with the buildings with a no scroll effect and the next block with the data elements with normal scroll. This creates an effect that the second block slides over the first one.
-
Example 2 — No scroll parallax effect
In this example, we achieve the "Parallax" effect by combining multiple blocks of the same background and text elements. This common effect is desired to create the "floating text" effect, in which the two backgrounds flow perfectly into one another as if it was one long background.
-
Example 3 — No scroll parallax effect with a middle block of text
In this example, you can see the no scroll effect for two blocks without text. However, there is a middle white block with text; this shows the effect that the two background blocks are as one behind this white middle block.
Known limitations
Applying a background scroll speed takes much calculation power for your reader's device. For that reason, it's best to be mindful of the number of times you use this effect in your Foleon Doc. Extensive use can result in inconsistent performance or unexpected behavior.
We've noticed a few designs that are likely to cause issues:
- Your page holds multiple blocks with a no-scroll background image and a white column on top. This might show a transparent line between the white columns, displaying the no-scroll background.
- Overuse of the parallax effect — for example, by having ten blocks in a row with no scroll applied. You might experience "glitches" or "white lines" between blocks.
We have a few recommendations to avoid issues in the editor and live version of your Foleon Doc:
- When you have multiple blocks with the same no-scroll background image, set the background color to transparent for all blocks and columns.
- Don't apply a background scroll speed to more than ten blocks for a page.
- Try not to apply a background scroll speed to a background image in combination with a color overlay.
⚠️ These recommendations usually decrease the number of glitches on a Doc but will not fully resolve the issue. Apply the parallax effect sparingly. This way, it stays special for your audience while avoiding any issues.
Related articles