Parallax scrolling is one example. It allows different elements (such as backgrounds, images, and text) on a page to move in different directions and at different speeds with the scroll of the mouse. This actively involves site visitors with the content. It also creates the illusion of depth. For instance, as you scroll down the page of an aviation site, you might see slowly moving clouds in the background while an airplane flies more quickly through the sky in front of the clouds.
The best way to understand parallax scrolling is to see it in action. At right are a few websites built with Adobe Muse CC that do it well.
In this article, I show you some parallax scrolling examples, explain when (and when not) to use it, give you a taste of the technology powering the effect, and show you how to do it in Adobe Muse CC.
It can be tempting to try a new technique for novelty's sake. (When drop shadows were introduced to Adobe InDesign, those suckers were everywhere.) On the web, you need to be especially thoughtful because user experience is tied directly to site navigation. Just because you can use parallax scrolling doesn't always mean you should.
That said, many types of sites benefit from the parallax scrolling effect. In addition to making a site more interactive, parallax scrolling can:
To determine whether parallax scrolling is right for a specific site, start by asking whether it adds to the user experience.
<section> and attributes like
If that quick overview makes you pause, you're not alone. Parallax scrolling can get complicated fast. That's why it's so exciting that Adobe Muse CC can apply parallax scrolling to your pages — it means that you can implement parallax scrolling without writing a line of code.
To try it yourself, you need Adobe Muse CC. If you don't have it, just download and install the free 30-day trial software from Adobe Creative Cloud. To follow along with this tutorial, download the sample files (ZIP, 146 KB), unzip them, and save the SourceSansParallaxType folder to your desktop.
To see the final version of the file, open SourceSansPro_final.muse in Adobe Muse CC, or visit the SourceSansPro sample site.
Follow these steps to apply parallax scrolling to a repeating 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 both the horizontal and vertical motion and the speed of the browser fill image.
The top two options control the vertical movement for a background image, and the bottom two options control the horizontal movement of the background image. A value of 0 means that the background image doesn't move when the browser scrolls vertically. A value of 1 means that the background image moves in the direction selected (up, down, left, or right) at the same speed as the viewer scrolls.
Note: In Adobe Muse CC, you can apply parallax scrolling to either background fill content or elements on the page. The background fill content needs to be tiled horizontally or vertically, and the Scroll Motion effect is available only for the direction(s) the fill image is tiled.
The page elements can't be in a widget or a group. You can't apply parallax scrolling to elements set to 100% width, pinned items, or inline elements (such as images pasted inside text frames to create columns of wrapping text content).
Follow these steps to apply parallax scrolling to an image on a page:
Notice the T-shaped handle that extends off the top of the selected image (see the arrow in Figure 10). The top point location of the T-shaped handle represents the key position, that is, the area on the page where the element will position itself after scrolling. Use this handle to set up the movement that will occur before and after the top point of the T reaches the top of the browser window.
Tip: You can also change the key position by dragging the T-shaped handle with the Selection tool to visually place the key position in the design.
That's it. Now that you've learned the basics of parallax scrolling in Adobe Muse CC, you can begin to add it to some of your own projects.
These examples cover the key concepts of working with parallax scrolling in Adobe Muse CC. To explore further, select different objects on the SourceSansPro_final.muse home page and click the Effects link in the Control panel to see the Scroll Motion options. Experiment with the settings to see how they affect the object movement when scrolling the page. With the Selection tool, select the text "Site created with" and click the Effect link. In the Effect options, click the Scroll Motion button. In the Motion Before Key options, click the radio button next to the arrow that points right. Preview the page either in browser preview (File > Preview Page In Browser) or in Preview mode in Adobe Muse CC.
For more tutorials and content related to Adobe Muse CC, check out the Adobe Muse website.
Brian Wood is a web developer and technology trainer at BrianWoodTraining.com. He has written eight books, including Adobe Muse Classroom in a Book, speaks at conferences like Adobe MAX, and loves everything web. You can reach him at firstname.lastname@example.org or check out his site at askbrianwood.com.