The fly-in-bottom, fly-in-top, fly-in-left and fly-in-right effects allow an element to fly-in once the element being targetted is visible in the viewport.
Scroll based fade in animation with default attributes If the developer wants to change the opacity even after it the element is fully visible please specify this attribute on the element. * data-repeat - By default once the element is fully visible the opacity of the element is locked in. The value specified in percent dictates that the animation should be fully visible when the element crosses this threshold. * data-margin-end - This parameter determines when to stop the timed animation. The value specified in percent dictates that the animation should be triggered when the element is above the specified percentage of the viewport. * data-margin-start - This parameter determines when to trigger the timed animation. You can control the animation via the following attributes: Scroll dependent fade in effect can be added to any element by adding amp-fx="fade-in-scroll" attribute to an element. The fade-in-scroll effect allows an element to fade in as the user scrolls in the viewport. Scroll triggered fade in animation with default attributes
The value specified in dictates that the animation should be triggered when the element is above the specified percentage of the viewport. "ease-out" - cubic-bezier(0.40, 0.00, 0.40, 1.00) (default),ĭata-margin-start - This parameter determines when to trigger the timed animation. You can also choose from one of the presets available: The default value is 1000ms.ĭata-easing - This parameter lets you vary the animation's speed over the course of its duration. You can control the animation via the following attributes:ĭata-duration - This is the duration over which the animation takes places. That is, once the element is within the viewport a timed animation will start that fades in the element. Scroll triggered fade in effect can be added to any element by adding amp-fx="fade-in" attribute to an element.Ĭurrently, only a scroll triggered timed animation is supported. The fade-in effect allows an element to fade in once the element being targetted is visible in the viewport. * A value less than 1 scrolls the element downward (element scrolls slower) when the user scrolls downward. * A value greater than 1 scrolls the element upward (element scrolls faster) when the user scrolls down the page. Parallax effect can be added to any element by adding amp-fx="parallax" attribute and the intensity of the effect can be controlled via data-parallax-factor.ĭata-parallax-factor specifies a decimal value that controls how much faster or slower the element scrolls relative to the scrolling speed: As the user scrolls the page, the element scrolls faster or slower depending on the value assigned to the data-parallax-factor attribute. The parallax effect allows an element to move as if it is nearer or farther relative to the foreground of the page content.
0 kommentar(er)
