How to Create Parallax Scrolling Using Adobe Muse

One of the “hottest” techniques on the web today is parallax scrolling. We’ve all been to those sites where you rotate the scroll wheel on your mouse and the content on the page moves up and down or across the page as you rotate the mouse wheel.

For those new to web design and graphic design, this technique can be exceedingly difficult to achieve due to the amount of CSS required.

If that describes you, there are a number of applications that may just appeal to graphic artists. They basically use a familiar page layout approach to web pages, which means there is not a lot, if any, coding is involved. One application that has really rocketed into prominence is Adobe Muse.

The work being done by graphics pros using Muse is quite amazing and you can see a sampling of what you can do by visiting the Muse Site of The Day. Though web pros tend to regard Muse as being some sort of “wind-up toy”, it is also being used by designers to create mobile and web prototypes that will be eventually handed off to the developers on their team.

One technique that is incredibly easy to accomplish with Muse is parallax scrolling and, if you want to see the completed version of the exercise We will be walking through, point your browser to this page. When you roll your mouse’s scroll wheel, the text seems to move up or down the page and the images change.

Let's get started.

of 07

Create a Web Page

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.

of 07

Format the Page

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 Colour Picker.

of 07

Add Text to the Page

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.

of 07

Add Image Placeholders

The 100% with button is circled in the Properties.

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.

of 07

Add Images to Image Placeholders

The Image Fill properties dialog box is open.

With the Rectangle selected we clicked the Fill link – not the Color Chip – and clicked the Image ink to add an image in 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.

of 07

Add Parallax Scrolling

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.

of 07

Browser Test

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.