Parallax

Parallax Widget

The Parallax widget allows you to animate different properties of your widget content, such as opacity and translation, depending on the scroll position of your site.

Background Parallax

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Individual Animations

Animate title, content and media individually. You can apply different animations to each part of your widget item to add a more dynamic feel to your site.

Fade In

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Read more


Viewport & Velocity

Adjust the easing of the animations and determine how long they will last depending on the widget’s position in the viewport. For example, end the animation in the middle of the viewport.

Zipper Animation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Background Color

The Parallax widget even allows you to set different background colors for your item and transition through them when scrolling.

Background Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Parallax Options

Parallax Options Settings Description
Background Fullscreen Extend the background to full viewport height.
Background Min Height [Number] Set the minimum height of the image.
Background Translate Y [Number] Animate vertical position of background in pixels.
Background Color [Hex] Animate background color from first value to second value.
Title Opacity [Float] Animate opacity from first value to second value.
Title Translate X [Number] Animate horizontal position of title in pixels.
Title Translate Y [Number] Animate vertical position of title in pixels.
Title Scale [Float] Animate scaling from first value to second value.
Content Opacity [Float] Animate opacity from first value to second value.
Content Translate X [Number] Animate horizontal position of content in pixels.
Content Translate Y [Number] Animate vertical position of content in pixels.
Content Scale [Float] Animate scaling from first value to second value.
Advanced Viewport [Float] Animation range depending on the viewport.
Advanced Velocity [Float] Animation Easing (value (1) is linear)
Media Options Settings Description
Display Show Media Display the media of all items.
Media Image [Number] Set the width and height of images in pixels.
Content Options Settings Description
Text Display Show or hide title and content.
Text Title Size H1, H2, H3, H4, Extra Large Define the font size of the title.
Text Content Size Default, Text Large, H2, H3, H4 Define the font size of the title.
Text Alignment Left, Right, Center Define the text alignment.
Link Display Display the Read More link. The link URL is added to each item in the Content Manager.
Link Style Text, Button, Button Primary, Button Large, Button Large Primary Set the style of the Read More link.
Link Text [Text] Define the link text.
Width Phone Portrait 50%, 60%, 66%, 70%, 75%, 80%, 90% Content width on phone portrait.
Width Phone Landscape Inherit, 50%, 60%, 66%, 70%, 75%, 80%, 90% Content width on phone landscape.
Width Tablet Inherit, 50%, 60%, 66%, 70%, 75%, 80%, 90% Content width on tablet.
Width Desktop Inherit, 33%, 40%, 50%, 60%, 66%, 70%, 75% Content width on desktop.
General Options Settings Description
Custom HTML Class [Text] Set a custom HTML class that will be added to the widget element in the rendered output.
Custom Link Target Open all links in a new window.