Learn how to add Scroll effects to Browser and Background fills of a website using Adobe Muse.
Scroll effects make it possible to control the speed of browser background fill images as well as tiled or non-tiled page elements. Scroll effects can be applied to browser fill that uses background images that are tiled, scaled to fit, scaled to fill, or set to original size. The browser fill moves directionally as the page scrolls, based on the directions and speeds you set in the Scroll section of the Browser Fill menu.
The scroll options are dimmed out and are not available until you add an image to the background of the browser fill using the Browser Fill menu. You cannot apply scroll effects to a browser fill that is only filled with a solid or gradient color.
To set up scroll motion effects for browser fills, follow these steps:
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).
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 element with the scroll effect of motion applied (in this case, the tiling image set as the browser fill) 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 Initial Motion section, you'll notice that the values in the fields have a lower case "x" next to them. This stands for times. In the Browser Fill image, the initial motion section indicates that the browser fill will move in an upward direction, at 1 times (the same speed as) the rate of scrolling. If the visitor scrolls the page faster, the motion of the scroll effect increases in speed to match the same pace.
In the horizontal (left and right) section, the field displays "0" which means that the browser fill will not move horizontally left or right.
The Final Motion section contains a similar interface. In the Browser FIll image, the browser fill is set to move upward at 1 times the rate of motion and will not move horizontally.
Hover over the Information button (i icon) in the top bottom right left corner of the Scroll tab to learn how scroll effects are applied to a browser fill.
Scroll motion can be applied to objects on the page that have tiled or non-tiled background images applied as fill. Follow these steps:
Notice the T-handle that appears above the element enabled for scroll motion. The handle is a visual representation of the key position (which is currently set to 100px above the element). The icon in the center section of the Scroll tab corresponds to the location of the T-handle on the page. You can reset the key specify positions to when scroll effects will occur by either entering a new value in the center field or dragging the T-handle on the page. As you drag the T-handle, the area above the key position is temporarily dimmed.
The T-handle does not have to extend upwards in relation to the selected element. You can click-drag the T-handle so that it is aligned with the top edge of an element, or drag the T-handle so that it extends below an element.
Muse offers complete flexibility during the design process, because you can choose to drag the handles or enter numbers in the key position field to precisely control the movement that occurs when a visitor scrolls the page.
The Scroll tab in the Fill menu works the same way as the Scroll tab in the Browser Fill menu:
In the image with the Scroll properties, the rectangle is set to move to the right, moving into position at a speed of 3 times the rate of the visitor scrolling, and arrives in its position in the design when the page in a browser meets the key position. Once the visitor scrolls past the key position (100 pixels) the rectangle begins moving left, out of position, at 3 times the rate of visitor scrolling. In this example, the rectangle does not move vertically because both of the vertical fields are set to 0.