Animations
Animations
The shopping experience scroll animations are triggered when the page is scrolled. This allows the content to be displayed in an animated manner.
Select the block (1) or section and open the Animations & Effects (2) area. Select the desired animation from the Animation type (2) list.
The Advanced Settings (1) opens a window with further settings. If these are not configured, the default values from the theme configuration apply.
The Duration (2) specifies how long the animation lasts in seconds. The Delay (3) describes the time until the animation starts. So, if an element reaches the visible area by scrolling, the animation waits another 0.25 seconds before starting. The Offset (4) is the distance in pixels that determines how far the element must be from the bottom of the screen before the animation is triggered. Play only once (5) ensures that the animation plays only once; otherwise, the animation plays every time the element re-enters the viewport.
The animations are triggered when the element moves into the viewport by the visitor scrolling.
The animation classes are inserted into the CSS classes (2) field of the block (1) in the layout settings.
Example:
The animations are triggered when the element moves into the viewing area of the so-called viewport by scrolling.
Scroll-Animation
To initiate an animation add the class zen-animate in conjunction with any of the following pre-made animation classes:
fade-infade-in-topfade-in-bottomfade-in-fwdslide-in-topslide-in-rightslide-in-bottomslide-in-leftslide-in-blurred-topslide-in-bck-centerslide-in-blurred-bottompopularpuff-in-centerflip-in-hor-topflip-in-hor-bottomswing-in-bottom-fwdbounce-in-bottomscale-in-center
Scroll Overlay
Scroll Overlay
To do this, select a block (1) or section, open the Animations & Effects (2) tab and activate the Scroll Overlay (3) option.
Once Scroll Overlay (1) is activated, no animation can be selected, and vice versa. With Scroll Overlay enabled, the layer is fixed, so no entry animation would start.
Example:
To initiate the effect add the class zen-scroll-overlay .
Example:
Last updated