Parallax Animation
Content Fields
Content Fields settings, all content fields of an add-on are shown in the Items List when adding new item or modify existing item. Here is a list of common content fields.
| Setting | Description |
|---|---|
| Content | Define button content |
| Link | Enter or pick a link, an image or a video file. |
| Link Title | Enter an optional text for the title attribute of the link, which will appear on hover. |
| Link Target | Opening a link to new window or same window. |
| Icons | Place scalable vector icons anywhere in your content. |
| Style | Set the button style (support 08 button styles). |
| Size | Set the size for buttons. |
| Fullwidth Button | Enable fullwidth button |
Button Settings
Button settings, learn more about the button add-on settings. Here is a short overview.
| Setting | Description |
|---|---|
| Width | Select Fullwidth option if you wish to use button fullwidth |
| Gutter | Set the grid gutter for multiple buttons. |
| Button Alignment | Define the horizontal alignment of flex items and distribute the space between them. |
| Button Breakpoint | Define the device width from which the alignment will apply. |
General Settings
General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
| Setting | Description |
|---|---|
| Margin | Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom. |
| Remove top margin. | Use this option to remove the add-on's top margin |
| Remove bottom margin. | Use this option to remove the add-on's bottom margin |
| Animation | Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on. Or enable a parallax animation for this add-on. |
| Visibility | Define when the add-on should be hidden. |
| CSS Class | If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file. |
Parallax Animation Settings
The Parallax Animation Settings allow you to animate an add-on depending on the scroll position of the document. To configure a parallax animation,just enable the Parallax Animation feature.
| Setting | Description |
|---|---|
| Horizontal | Animate the horizontal position (translateX) in pixels. |
| Vertical | Animate the vertical position (translateY) in pixels. |
| Scale | Animate the scaling. 1 means 100% scale, 2 means 200% scale, and 0.5 means 50% scale. |
| Rotate | Animate the rotation clockwise in degrees. |
| Opacity | Animate the opacity. 1 means 100% opacity, and 0 means 0% opacity. |
| Easing | Determine how the speed of the animation behaves over time. A value below 1 is faster in the beginning and slower towards the end while a value above 1 behaves inversely. |
| Viewport | Set the animation end point relative to the viewport height, e.g. 0.5 for 50% of the viewport. It is very useful to stop the animation of a text when it’s in the middle of the screen. |
| Breakpoint | Display the parallax effect only on this device width and larger. It is useful to disable the parallax animation on small viewports. |