Learn how to prototype web and mobile apps

How to work with Parallax Scrolling Speeds in your interactive prototypes

In this tutorial, we’ll take a look at another Justinmind’s Parallax element for defining rich interactions in your interactive wireframe: the Scroll Speed widgets. More specifically, we’ll see how you can use different scrolling speeds for different elements, in order to provide additional effects to your Parallax scrolling. See here for creating a parallax scrolling effect in your prototypes.

Before starting, have a look at this example to see different scrolling speeds in a webpage. You will notice that, as scrolling down, the iPhone image in the middle of the page will move at a slower speed than the background. How can we reproduce this in our web or mobile wireframe? In Justinmind, you’ll notice 3 predefined widgets in the Parallax widget library: 30, 50 and 80 percent Scroll Speed.

the Scroll Speed widgets

They are  basically dynamic panel widgets that carry with them some specific events. The scroll speed can be customized by editing the expressions within the events. As dynamic panels, you can also edit their content by double-clicking on the panel you wish to work on.

Add Scroll speed widgets to your web or mobile wireframe

Let’s start by dragging the 3 Scroll Speed widgets – 30%, 50%, 80% – onto the center of the canvas, one next to the other. In order to allow for enough scrolling, also add one or more components at the bottom of the canvas.

You can double click on the widgets to edit their current content: for instance, you can upload another image or a text.

Click on “Simulate” and slowly scroll down: you will see that the 3 widgets will move at different scroll speeds. The larger the percentage, the faster the widget will move along with the window, i.e. the longer it will stay visible in the screen.

Parallax Scrolling Speed

Exploring the default events in the Scroll Speed widgets

Now let’s have a closer look at the predefined events, in order to understand better the functioning of these specific Parallax elements.

Two sets of events are in place to provide the interaction: an ‘On page load‘ + ‘Set value‘ and an ‘On scroll‘ + ‘Move‘.  When the page is initially loaded, a ‘Set value’ action will collect the position value of the panel.

The Scroll Speed widgets - default events

This “initial position” label is crucial to the implementation and it shouldn’t be removed, as it stores the position value that will be necessary in the second event to define scrolling conditions.

When scrolling starts,  the ‘On scroll‘ + ‘Move‘ event will be triggered. The ‘Move’ action is defined by an expression: the percentage of window scroll (in this case 30%) will be added to the initial position value collected earlier.

If we applied a 100% scroll speed to a widget, it will stay fixed in the screen, because it will have the same speed as the window scroll. When the percentage is lower, e.g. 30%, 50% or 80%, the widget scroll speed will be slower than the window scroll. Visually, this means that it will – more or less slowly – match the top of the window and disappear. The larger the percentage, the faster it will move with the window scroll, i.e. it will remain visible for longer, before matching the top of the window and disappear.


The Scroll Speed widgets - move action

Further prototyping with Parallax

This tutorial covers the “Scroll speed” parallax widget, which you can combine with other design elements to make unique web and mobile wireframes. Prototyping with parallax has a lot of other functionalities that can be combined to create incredible app or web wireframes:

– Create a fixed position menu in your web or mobile wireframe. Learn how!

– Slide-in layers: slide in elements from the outside of the page into the visual viewport as you scroll downLearn how!

– Pinned layer: pin a sticky element to a specific location in your web or mobile prototype, so it is always visible as you scroll downLearn how!

– Pinned panels: pinning panels to a specific position allows you to create fixed/sticky elements that stay in place and are always visible when scrollingLearn how!

– Fade in layer: provide an initially invisible element that shows up with a transition effect when a defined point has been reached by scrollingLearn how!