Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a parallax scrolling effect from scratch in your prototypes

Learn how to create and simulate a parallax scrolling effect from scratch in your web prototypes with this tutorial.

Let’s see how we can create a parallax scrolling effect so that, upon simulation, the elements remain fixed in position on vertical scroll. In our example, we will use the pinned top, 30% scroll speed and the 50% scroll speed parallax widgets.

You can download the below example here.

anim-parallax-homepage-example

Creating a parallax scrolling effect

1. In a new web prototype, go to the Parallax elements widget library. Drag a 30% scroll speed widget to the canvas and place it at the top of the canvas. Rename it “Thirty-percent-slider” and resize it to 1300 x 710 px in the Properties tab. This will be our sticky element that will remain fixed upon scroll.

interactive-prototypes-parallax-library

2. The parallax widgets have UI elements within their structure and these can be customized to suit your content needs. To match our example, select Panel 3 from within the 30% scroll speed widget in the Outline tab, remove the Ellipse widget and add an image of your choosing to the Image widget.

3. Next, drag a Pinned top widget to the canvas and place it at the top of the canvas. Move it in front of the Pinned top widget by right clicking on it in the Outline tab and changing its order. Resize it to 1300 x 80 px.

interactive-prototypes-parallax-library-menu

4. In the Outline tab, select Panel 7 from within the Pinned top widget and replace the Icon and Rich text elements within the widget with what you would like your navigation menu to contain. In our example, we’ve used Image and Text widgets to create a top navigation menu.

5. Next, drag a 50% scroll speed widget to the canvas and place it on top of the 30% scroll speed widget. Move it in front of the Pinned top widget by right clicking on it in the Outline tab and changing its order. Resize it to 918 x 170 px.

6. In the Outline tab, select Panel 2 from within the 50% scroll speed widget and replace the Image and Eclipse widgets with Text widgets. Fill the text boxes with the header and subheader of your webpage accordingly.

7. Next, drag a Dynamic panel to the canvas and place it just below the 30% scroll speed widget. Resize it to 1300 x 1582 px. Drag two Paragraph widgets and an Image widget to the canvas. These will contain the main content of your webpage, so customize them as needed.

interactive-prototypes-parallax-map

This image shows you the position of each parallax element.

 

We now have all the UI components necessary to simulate our parallax web prototype. Note that the parallax elements (Pinned Top, 30% Scroll and 50% Scroll) have events automatically in place, so we don’t need to add any manually for the parallax interaction to work upon simulation.

If you want to add additional parallax interactions to your prototype, such as the footer that we have in our example, follow these steps:

1. Drag another 30% scroll speed widget to the canvas and place it towards the bottom of the dynamic panel, on top of it. Rename it “Thirty-percent_footer” and resize it to 1300 x 420 px in the Properties tab. This will be the footer of your webpage and it will also be fixed in position so that when you scroll up, it will remain visible.

interactive-prototypes-parallax-footer

In Image A we can see the original position of the footer. In Image B we can see the position after having scrolled up.

2. Replace the elements in Panel 6 within the 30% scroll speed widget withthe elements that you would like to be visible in the footer. In our example, we have used Image and Text widgets to create the footer with links to social media.

Tip: if you are editing the content of a parallax widget, note that the Text widget named ‘Label’ must remain inside all widgets for the parallax effect to work.

interactive-prototypes-parallax-labels

And that’s it! Click ‘Simulate’ to interact with your parallax web prototype. Both the 30% scroll speed slider and footer should remain fixed in place whilst scrolling down and up again respectively.

Next Tutorial > Use pinning panels in your interactive wireframes