Skip to main content

Parallax Background Component

Add a Parallax Background to smooth and connect your slide content

Will Matysik avatar
Written by Will Matysik
Updated over 2 weeks ago

Note: The Parallax Background component is only available to the newest component version that utilizes the styling panel, contact your CSM with questions about updating to the Component Styling Panel.

This feature creates a smooth parallax effect as users navigate from slide to slide, adding depth and motion to presentations without any extra effort from the creator. It’s another step forward in giving our users modern, flexible design tools that elevate their storytelling.

Beyond just looking sharp, the parallax effect adds visual polish and creates a more immersive experience for viewers, helping presentations feel dynamic and professional right out of the box. It’s another great example of how we’re making DIGIDECK both more powerful and more intuitive, allowing users to create standout content that holds attention and leaves a lasting impression


Where to Add the Parallax Background Component:

The Parallax Component will need to be added into the Deck Background layer group, or Chapter Background layer group for the parallax animation to work as it relies on slides changing to move the focal point of the image within the browsers viewport (which is the visible area of a webpage within a browser window).

Note: you can add a Parallax Background component directly into the Deck Background or Chapter Background layer group by clicking on the "+" icon that is located on the right side of the layer group within the Layers panel.


Movement During Slide Change Depends Upon:

The amount the background image moves when a slide is changed will depend upon the amount of slides within a deck/presentation (or chapter), as well as the ratio of the image and the Parallax Direction being used.

Recommendations for Image Size/Ratio and Parallax Direction (if the component takes is set to use the full width and height of the slide area):

  • For a Vertical Parallax Direction you will want to use a image that has a height greater than the width

  • For a Horizontal Parallax Direction you will want to use an image that has a width greater than the height, however you will want it to be wider than an image with a 16:9 width to height ratio


Style Slides Without Backgrounds:

For the Parallax Background to be seen in the background of slides, slides must be styled so that they don't have components that take the full height and width of the slide area, and a Slide Background Color should not be utilized as it will cover the Parallax Background when it is located in the Chapter Background or Deck Background layer group.

Did this answer your question?