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.
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. |