Scroll effects in Adobe Muse allows you to create dynamic scrolling effects for a website. You can create animated effects that involve two or more layers of content that move in the browser at different speeds. Scroll effects is a web design technique that enables you to set the speed and direction of each element in your web page. You can control the motion settings of elements, change the opacity, configure the playback settings of a Slideshow widget, and work with animation content through scroll effects.
You can apply scroll effects to almost all the elements in Adobe Muse. This includes background images, text, and images. You can apply a background fill scroll effect to any element that has a background image set for a fill. You can also enable scroll effects in the Browser Fill menu, if you set a background fill image to display in the browser window.
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.
To apply scroll effects to an element, ensure that the element's state is set to Normal.
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:
The Key Position in scroll effects refers to the position where the page elements you configure, start to move. For example, in the Browser Fill menu > 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 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.