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.
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.
Select an element and ensure the element's state is set to the Normal state before applying any scroll effects.
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.
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.
When working with Scroll Effects within Adobe Muse, there are three key concepts you should understand, primarily:
- Key Position
- Initial Motion
- Final Motion
Take a moment to review the Scroll section of the Browser Fill menu. The field in the center section (currently displaying 0px) corresponds to the key position (the T-handle location) that controls the motion. The default setting of 0px means that the T-handle is set to the very 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 will move (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 the further you scroll down a page. (In the Control panel and in the Transform panel, the distance from the top of the page is referenced as the Y value).
In the Initial Motion section, you'll notice that the values in the fields have a lower case "x" next to them. This stands for times. If the visitor scrolls the page faster, the motion of the scroll effect increases in speed to match the same pace.
The values entered in the Final Motion section will be applied after the page is scrolled past the key position (location of the T-handle). The Final Motion section contains a similar interface.
The element with the scroll effect of motion applied moves in the direction(s) that have a value greater than 0 in the field. If both the horizontal and vertical directions have a value set to 0, the element is essentially pinned to the page and doesn't move.
In the horizontal (left and right) section, the field displays "0" which means that the browser fill will not move horizontally left or right.