Scroll effects is a web design technique that enables you to set the speed and direction of each element in your web page. Using scroll effects, you can create dynamic, animated websites that involve two or more page elements that move in the browser at different speeds. Adobe Muse allows you to configure various settings including motion settings, opacity, and playback settings of a slideshow or an animation.
You can apply scroll effects to almost all the elements in Adobe Muse in a Fixed site or using fixed breakpoints. The elements include background images, text, and images. You can also apply a background fill scroll effect to any element that has a background image set as a fill. It is also possible to enable scroll effects in the Browser Fill menu, if you set a background fill image to display in the browser window.
You cannot apply scroll effects to background fill elements that use certain graphic effects, such as bevel and inner glow. When these types of effects are applied to the selected object, the options in the Scroll section of the Fill panel are disabled.
To apply scroll effects to an element, ensure that the element's state is set to Normal.
Apart from images and background fills, scroll effects are often used in animations to provide an illusion of depth. You can set different speed movements for different elements in a page. For example, a page layout can include a foreground element that moves twice as fast as a middle ground element. A background tiled fill behind an animated content can be set to half the speed of the middle element. These settings simulate the way our eyes experience motion. The objects closest to our frame of reference appear to move more quickly.
Scroll effects are also helpful when you add anchor tags on a page. When a visitor clicks a link to jump to an anchor tag on a long or a wide page, the scroll effects come into effect. Using scroll effects and anchor tags, you can design a page with sections that appear to fly in, fade in, or animate into place. You can also create a series of menu items that all come together to form a consolidated navigation bar when the visitor jumps down to a lower area of the page.
Before you start using scroll effects in your layout, understand the following key concepts:
The Key Position in scroll effects refers to the position where the page elements you configure, start to move. For example, click the Browser Fill menu and select Scroll tab. The field in the center section (currently displaying 0 px) corresponds to the Key Position. When you turn the motion settings on, the T-handle location appears on the page. This T-handle controls the motion range. The default setting of 0 px means that the T-handle is set to the top edge of the browser window.
The number of pixels specified in the Key Position field means that the changes you set in the Initial Motion section moves (in that direction, and at that speed) while the page is being scrolled to that location. The top of the page begins at 0 and then the number of pixels increases further as you scroll down a page. In the Transform panel (Window > Transform), the distance from the top of the page is referenced as the Y value.
The Initial Motion in scroll effects, is the position in px where the scroll motion starts. Configure the Initial Motion to define the scroll behavior of elements, between the Key Position value and the edge of the page element.
In the Initial Motion section, notice that the values in the fields have a lower case "x" next to them. This "x" stands for times. If the visitor scrolls the page faster, the motion of the scroll effect increases in speed to match the same pace.
Final Motion determines the movement of a page element after a user scrolls beyond the specified value. The values configured in the Final Motion section are applied after the page is scrolled past the Key Position (location of the T-handle).
The element with the scroll effect of motion applied moves in the directions that have a value greater than 0 in the field. If both the horizontal and vertical directions are set to 0, the element is pinned to the page and does not move.
If the horizontal section has the value "0", the browser fill does not move horizontally left or right.
To view a visual representation of the key concepts related to scroll effects in Adobe Muse, see the following image:
Go to the site on scroll effects to understand how scroll effects works.