Create parallax scrolling with Adobe Muse

One of the most popular techniques on the web today is parallax scrolling. We’ve all been to those sites where you roll the mouse on the scroll wheel and move the content on the page up and down or across the page as you roll the mouse wheel.

For those new to web and graphic design, this method can be extremely complex due to the amount of CSS required.

If that describes you, there are some apps that graphic artists might love. They basically use the familiar page layout approach to web pages, which means there isn’t much, if any, coding involved. One application that really catches on is Adobe Muse.

The work done by graphics professionals using Muse is amazing and you can see an example of what you can do by visiting Muse Website of the day † While web professionals tend to see Muse as a sort of “beginner’s toy,” it is also used by designers to create mobile and web prototypes that will eventually be passed on to developers on their team.

One technique that is incredibly easy to do with Muse is parallax scrolling and if you want to see the completed exercise. When you rotate the scroll wheel of the mouse, the text appears to move up or down the page and the images change.

Let’s start.

Contents
  1. Create webpage
  2. Format page
  3. Add text to page
  4. Add image placeholders
  5. Add images to placeholder images
  6. Add parallax scrolling
  7. browser test

Create webpage

When starting Muse, click on the link New website † Will open New site properties † This project is being developed for a desktop application and you can select it from the drop-down menu Initial Layout † You can also set values ​​for the number of columns, gutter width, margins, and padding. In this case, it didn’t bother us much, and we just pressed Okay

Format page

When you set the site properties and clicked Okay you came in the so-called view Plan † At the top is Homepage and at the bottom – main page † We only needed one page. To get into Design view, we double clicked on the home page, which brought up the interface.

On the left are a few basic tools and on the right are the various panels used to manage the content of the page. At the top are properties that can be applied to the page or anything selected on the page. In this case, we wanted a black background. For this we click on the color chip BrowserFill and choose black from the color palette.

Add text to page

The next step is to add text to the page. We chose Text tool and draw a text box. We entered the word “Welcome” and set it in the properties for the text Arial, 120px white. Centre.

We then switched to the Selection tool, clicked the text box and set it to Y position equal to 168 pixel on top. With the text field still selected, we opened alignment bar and align the text box with the center.

Finally, with the text field selected, we held down the keys Option/Alt And Shift and made four copies of the text field. We’ve changed the text and Y position of each instance to:

  • do, 871

  • Graphic, 1621

  • Software, 2371

As you set the location of each text field, you will notice that the page size changes depending on the location of the text.

Add image placeholders

The next step is to place images between blocks of text.

The first step is to choose: Rectangle Tool and draw a rectangle extending from one side of the page to the other. After we select the rectangle, we set it height 250px And Y position 425 pixels † They are always meant to stretch or shrink to the width of the page to accommodate the user’s browser viewport. To do this, we pressed the button 100% width in Properties. This makes the X value gray and ensures that the image is always 100% of the width of the viewport in the browser.

Add images to placeholder images

With Rectangle selected, we clicked the link “Fill”, not “Color Chip” and pressed the button Wizard’s Ink to add an image to the rectangle.In the area fit we chose Scale to fit and clicked central handle in the region of Position to scale the image from the center of the image.

We then used the method: Option/Alt-Shift-drag to create a copy of the image between the first two blocks of text, open the Fill panel and swap the image for another. We also did this for the other two images.

With the graphics in place, it’s time to add movement.

Add parallax scrolling

There are several ways to add parallax scrolling to Adobe Muse. We’ll show you an easy way to do this.

With the Fill panel open, click scroll tab and when it opens, check the box Movement

You see the values primary And last move † They determine how fast the image moves relative 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.

Horizontal and vertical arrows determine the direction of movement. If the values ​​are 0, the images will not move, regardless of which arrow you click.

Mean key position – shows the point at which the images begin to move. The line above the image for this image starts 325 pixels from the top of the page. When the scroll reaches this value, the image starts to move. You can change this value by changing it in the dialog box or by clicking the dot at the top of the line and dragging it up or down.

Repeat for other images on the page.

browser test

We were done with this. First of all, for obvious reasons, we chose: File > Save Site † To test the browser, we simply chose File > Preview page in browser † This opened the default browser for our computer and when the page opened we started scrolling.

Leave a Reply

Your email address will not be published.