How to Create Parallax Scrolling Using Adobe Muse

When you launch Muse click the New Site link. This will open the New Site Properties. This project will be designed for a desktop application and you can select it in the Initial Layout pop-down menu. You can also set the values for the number of Columns, Gutter Width, Margins, and Padding. In this case, we weren't terribly concerned with this and simply clicked OK. 

When you set the site properties and clicked OK you were taken to what is called Plan view. There is a Home page at the top and a Master Page at the bottom of the window. We only needed one page. To get to Design View, we double-clicked the Home page which opened the interface.

On the left are a few basic tools and on the right are a variety of panels used to manipulate the content on the page. Along the top are the properties, which can be applied to the page, or anything selected on the page. In this case, we wanted to have a black background. To accomplish this, we click on the Browser Fill color chip and chose black from the Color Picker.

The next step is to add some text to the page. We selected the Text Tool and drew out a text box. We entered the word “Welcome” and, in the Properties set the text to Arial, 120 pixels White. Center Aligned.

We then switched to the Selection tool, clicked on the Textbox and set its Y position to 168 pixels from the top. With the text box still selected, we opened the Align panel and aligned the text box to the center.

Finally, with the text box selected, we held down the Option/Alt and Shift keys and made four copies of the text box. We changed the text and the Y position of each copy to:

• To, 871
• Graphics, 1621
• Software, 2371
• @About.com, 3181

You will notice, as you set the location of each text box, the page resizes to accommodate the location of the text.

The next step is to put images between the text blocks.

The first step is to select the Rectangle Tool and draw our a box that stretches from one side of the page to the other. With the rectangle selected, we set its height to 250 pixels and its Y position to 425 pixels. The plan is to have them always stretch or contract to the page width to accommodate a user’s browser viewport. To accomplish this, we clicked the 100% width button in the Properties. What this does is grey out the X value and to ensure the image is always 100% of the viewport width in a browser.

 With the Rectangle selected we clicked the Fill link – not the Color Chip – and clicked the Image ink to add an image to the rectangle. In the Fitting area, we selected Scale To Fit and clicked the center handle in the Position area to ensure the image is scaled from the center of the image.

Next, we used the Option/Alt-Shift-drag technique to create a copy of the image between the first two text blocks, opened the Fill panel and swapped the image for another. We did this for the remaining two images as well.

With images in place, it is time to add the motion.

There are a number of ways of adding parallax scrolling in Adobe Muse. We are going to show you a simple way of doing it.

With the Fill panel open, click the Scroll tab and, when it opens, click the Motion checkbox.

You will see values for Initial and Final Motion. These determine how fast the image moves in relation to the Scroll Wheel. For example, a value of 1.5 will move the image 1.5 times faster than the wheel. We used a value of 0 to lock the images in place.

The Horizontal and Vertical arrows determine the direction of the motion. If the values are 0 the images won’t budge regardless of which arrow you click.

The middle value – Key Position – shows the point where the images start to move. The line above the image starts, for this image, 325 pixels from the top of the page. When the scroll reaches that value the image starts to move. You can change this value by either changing it in the dialog box or by clicking and dragging the point at the top of the line either up or down.

Repeat this for the other images on the page.

At this point, we were finished. The first thing we did, for obvious reasons, was to select File > Save Site. To browser test, we simply selected File > Preview Page in Browser. This opened our computer’s default browser and, when the page opened, we started scrolling.