Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Parallax Scrolling
Another new feature is one of my favorites: parallax scrolling. You may not know the term, but you've seen it in action, such as on Adobe's example site. (Scroll down to see the effect.)
Parallax scrolling allows different content (backgrounds, images, and text) on one scrolling page to move at different speeds, creating the illusion of depth. Using an intuitive interface in Adobe Muse, you can easily add parallax scrolling to your pages. You can either apply parallax scrolling to background fill content or to elements on the page. The background fill content needs to be tiled horizontally or vertically, and the elements on the page cannot be in a widget or a group.
Here's one method for incorporating parallax scrolling in your pages:
- Click the Browser Fill link in the Control panel. With the Fill tab selected, click the Choose Background Image icon next to the Image field (see Figure 4). Navigate to one of your web images, and click Open.
- In the Browser Fill options, choose Tile from the Fitting menu and verify that scrolling is enabled (see Figure 5).
- Select the Scroll tab and turn on the Scroll Motion options (see Figure 6).
- Click the radio button next to the arrow that points down and change the vertical speed value to 1. Now the vertical movement down will be at the same speed as the vertical scrolling. Set the horizontal movement value to 0, which means it won't move horizontally.
- Click anywhere to close the Browser Fill menu and choose View > Preview Mode to preview the effect. Scroll vertically in the document window.
)
Figure 4 Editing the Browser Fill options.
)
Figure 5 Enabling scrolling.
)
Figure 6 Editing the Scroll Motion settings for the background image.
The Scroll Motion settings control the browser fill image motion in relation to the vertical scrolling in a web browser. You can manage the horizontal and vertical motion as well as the speed of the browser fill image.
The top two radio buttons in Figure 6 control the vertical movement for a background image, and the bottom two control the horizontal movement of the background image. In the top two selection options (vertical), a value of 0 means that the background image doesn't move when the browser scrolls vertically. In the bottom two selection options (horizontal), a value of 0 means that the background image doesn't move when the browser scrolls horizontally. A value of 1 in either box means that the background image moves in the direction selected (up, down, left, or right) at the same speed as the viewer scrolls.