Apply scroll effects to browser or background fill images

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.

How to add Scroll Effects to Browser Fill?

To set up scroll motion effects for browser fills, follow these steps:

1. In the Design view, choose Page > Page Properties. In the Layout tab, set the Minimum Height field to 2000 pixels. This ensures that the page is long enough to scroll. Click OK to save the changes and close the Page Properties dialog box.

2. Click the Browser Fill link in the Control panel. In the Fill tab, click the folder icon next to the Image section to choose an image file on your desktop. Choose the desired option in the Fitting menu and enable the Scrolling option.
   

3. Click the Scroll tab. Enable the Scroll Motion checkbox.

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.

4. Click the arrow buttons in the Initial Motion to specify the vertical direction (up or down) and/or the horizontal direction (left or right) direction to control the direction of of movement for the browser fill.
5. In the Initial Motion section, enter numeric values or click the up and down arrow buttons to set the horizontal and vertical scroll speeds. These settings are described in more detail below. If the a speed field is set to 0, it means that the element will not move in that direction during scrolling (before the key position is reached).
6. Update the values in the Final Motion section, to set the desired directions and enter numeric values in the corresponding fields to set the rate at which the scroll effects will occur.
7. To close the Browser Fill menu, click anywhere else on the page.
8. Choose File > Preview Page in Browser to load the page in a new browser window. Scroll the page to see the scroll motion effectsscroll effects occur.
9. When you are finished testing, quit the browser and return to Muse.

Apply scroll motion to a page element background fill

How to add Scroll Effects to Background 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:

1. While editing a page in Design view, choose Page > Page Properties. Set the Minimum Height to be much taller, such as 2000 pixels, to ensure the page is long enough to scroll. Click OK to save the changes and close the Page Properties dialog box. Alternatively, add enough page content to create a longer page.
2. In Design view, Select select the Rectangle tool in the Control panel.
3. Draw a rectangle on the page.
4. Use the Fill menu to set a tiled or non-tiled background image to fill the rectangle.

5. Click the Scroll tab in the Fill menu and set the scroll options.

6. Click the Scroll tab in the Fill menu. Enable the Motion checkbox and to begin setting the scroll options.

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.

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:

7. While an element enabled for Motion scroll effects is selected, use the Scroll tab of the Fill menu to set the key position numerically, or click-drag the T-handle on the page to set the key position.
8. Set the vertical and horizontal directions and corresponding rate of speed(s) in relation to the speed the page is scrolled in the Initial Motion section. This sets the motion that will occur before the page is scrolled to the key position.
9. Set the vertical and horizontal directions and corresponding rate of speed(s) in relation to the speed the page is scrolled in the Final Motion section. This sets the motion that will occur after the page is scrolled past the key position.
   

10. To close the Fill menu, click anywhere else on the page.
11. Press Preview or choose File > Preview Page in Browser to test the scroll effects after applying them. Scroll the page to see the element move.
12. Return to Muse or click the Design button when you are finished testing, to continue editing the page.