How To Create Parallax Scrolling Using Adobe Muse

of 08

How To Create Parallax Scrolling Using Adobe Muse

Parallax scrolling image from browser.
Parallax scrolling requires nothing more than a mouse with a scroll wheel.

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 of the applications 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 I 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 08

How To Create A Web Page In Adobe Muse

The New Site dialog box in Adobe Muse
you create a New Site not a document in 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, I wasn’t terribly concerned with this and simply clicked OK

of 08

How To Format A Page In Adobe Muse

image shows browser fill color
Add a background colour to a page using the Browser Fill property.

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. I only needed one page. To get to Design View I 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, I wanted to have a black background. To accomplish this I click on the Browser Fill color chip and chose black from the Colour Picker.

of 08

How To Add Text To A Page In Adobe Muse

The Adobe Muse Text Properties are shown.
Formatting text in Adobe Muse is not at all difficult.

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

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

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

  • To, 871
  • Graphics, 1621
  • Software, 2371
  •, 3181

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

of 08

How To Add Image Placeholders To A Page in Adobe Muse

The 100% With button is circled in the Properties.
Content can be set to always be the same width as the page.

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, I 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 I clicked the 100% width button in the Properties. What this does is to grey out the X value and to ensure the image is always 100% of the viewport width in a browser.

of 08

How To Add Images to Placeholders in Adobe Muse

The Image Fill properties dialog box is open.
Fill a rectangle with an image using the Fill dialog box.

 With the Rectangle selected I clicked the Fill link – not the Color Chip – and clicked the Image ink to add an image in the rectangle. In the Fitting area, I 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, I 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. I did this for the remaining two images as well.

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

of 08

How To Add Parallax Scrolling To An Image In Adobe Muse.

The Scroll Properties are shown
The AScroll properties control the "how" and "Where" of motion in Adobe Muse.

There are a number of ways of adding parallax scrolling in Adobe Muse. I am 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 check box.

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. I 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 08

How To Browser Test The Scroll Effect In Adobe Muse.

The project is previewed in a browser.
You can preview a page or site in a browser right from the File menu.

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