![]() Here’s a how-to for a couple animation setups.Ī common web pattern is a header that sticks to the top of the page, and blends in with the hero image when at the top position, so that it doesn’t distract from the center of the page. You specify the percent opacity value for the final position or, by swapping, the initial value. The opacity effect changes the transparency of the element while scrolling. By default it’s a fade-out like effect (blurred at the end), by swapping you have a have a fade-in effect, with the fully in focus view at the end of the range. You specify the blur factor for the final position. You specify the target angle value for the final position, and the position of the origin around which the rotation takes effect (default is 50% 50%, the center of the element).Ĭhanging the blurring of an element while scrolling gives an out of focus effect. The rotation effect changes the orientation of the element while scrolling. You specify the target “Scale” value for the final position. The scale effect changes the size of the element while scrolling. When moving horizontally between two canvas positions, the motion is controlled by a speed multiplication factor (like for the vertical scroll). If one of the two positions, or both, are outside the browser margins, the motion speed is determined by the browser window width and the range. Additionally the element can move all the way outside of the left or right of the browser window. ![]() Similar to vertical scroll, but in the horizontal direction. Swapping the direction will make the element starting from the farthest and moving towards the non-transformed canvas position. Positive speed values move the element in the same direction, negative ones in the opposite direction.Īn element typically starts motion from its canvas position, and is the farthest at the end of the range. when scrolling 100 pixels with a speed factor of 2 x, the element will move 200 pixels. The speed value is a multiplication factor, i.e. Vertical scroll moves the element at a different vertical speed with respect to the page scrolling speed. The vertical scroll effect is often referred to as the parallax effect, because of the different page layers moving at different speeds. This is mainly useful for animations very close to the top 0% position in the viewport, where the top edge would always be within the active range. The activation position controls whether the top, middle or bottom position of the element is where the animation starts. The settings popup for each animation effect shows a preview. The effect starts when the element enters the viewport range and ends when it leaves it (referring to the original untransformed position of the element). You can add and combine the following effects:Įach effect has a “Viewport” range that controls where the animation is active in the page. The SEO Assistant will warn about this.Īnimation effects tied to scrolling give your website a unique, immersive feel and depth. Also animation of elements at the top of the page is sometimes mistaken for slow page loading, so it might be best to avoid it there. When setting up animation for multiple elements, the delay setting can be set to different values tor each element, to spread out animations, giving a more organic feel to the whole.Īnimation and flashing content is frequently associated with advertising by visitors, so you should strive to use it sparingly and tastefully, particularly when it comes to the repetition. Once triggered the animation starts after the specified delay, for the specified duration. If the element is in view when the page loads, the animation is immediately triggered. When the element scrolls into view, the animation triggers once the element has scrolled some more into view, the exact distance is controlled by the “page bottom offset” setting. There are many effects to pick from, they are not shown in the Sparkle canvas, you need to check them in preview. ![]() The purpose of one time animation is to produce a reveal effect to the elements it’s applied to. Sparkle supports two kinds of animation for most elements, one is triggered by the element itself scrolling into view, the other follows, and is connected to, the scrolling motion. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |