Using scroll effects in Muse, you can create animated effects that involve two (or more) "layers of content" that move in the browser at different speeds. It is a web design technique that enables you to set the speed and direction of each element. You can create many changes that occur based on page scroll movement, including controlling the motion, opacity, playback of a Slideshow widget, and Adobe Edge Animate content.
Scroll effects are often used in animations because they provide an illusion of depth. For example, if you decrease the speed of movement from front to back, it appears that each element moves within its relative distance from the perspective of the visitor. A page layout may include a foreground element that moves twice as fast as a middle ground element that has a scrolling value set to 4. A background tiled fill behind the animated content can be set to half the speed of the middle element. This type of movement simulates the way our eyes experience motion, because the objects closest to our frame of reference appear to move more quickly.
You can apply a background fill scroll effect to any element that has a background image set for a fill. Examples of elements that can have background images are rectangles, image frames, and text frames. You can also enable scroll effects in the Browser Fill menu, if you set a background fill image to display in the browser window. The scroll effects work with background image fills, set to original size, scale to fit, scale to fill, or tiled.
Scroll effects applied to background fill elements cannot be applied to objects 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.
Note: Select an element and ensure the element's state is set to the Normal state before applying any scroll effects.
In addition to the visitor physically scrolling the page in a browser, scroll effects are also very 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 wide page, that also causes scroll effects to display. You can set up a menu for a very tall page and link to a series anchor tags, to make different 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.
There are three ways you can use scroll effects in Muse:
- Apply scroll effects to a Browser Fill (in the Browser Fill menu)
- Apply scroll effects to a page or page item background fill (in the Fill menu or Fill panel)
- Apply scroll effects to top-level page items that control motion, opacity, Slideshow widgets, and Adobe Edge Animate content (in the Scroll Effects panel)
Each of these workflows is described in more detail below.