Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a one page scroll in your interactive prototypes

Learn how to create and simulate a one page scroll in your web prototypes with the help of this tutorial.

A one page scroll is a single-scroll layout for a group of sections on a page. Learn how to create this effect in your Justinmind web prototypes by following the steps below.

You can download the below example here.

one-page-scroll-5

Creating a one page scroll in your interactive prototypes

1. Create a web prototype with a parallax layout. You can download our example here.

2. Your prototype should include as many sub sections in the screen as you would like menu options – otherwise this layout won’t work! For example, if you have three menu options (home, about and contact), you should have the same number of sub sections in your page, so that the user can navigate to them upon clicking on the corresponding menu option.

3. Expand the pinned top parallax element in the Outline tab and customize it so that it only includes the elements you want in your top menu bar – use text boxes for each menu tab and add an image if you wish to display a company logo etc. (You can delete the default elements). In our example, we have 5 menu tabs so we have included 5 text boxes, as well as a logo image.

4. Finally, add an SVG image for each menu tab you have. The image itself is not important – we will use them as page markers to separate each block of the screen in our events below. Position each page marker in the left-hand top corner of each section of the screen that represents that particular menu tab. In the properties tab (Background), change the transparency of the images to 100%.

1-1-one-page-scroll-in-your-interactive-prototypes

Adding events to make your prototype interactive

The only events we need to add are to the text boxes in the pinned-top parallax element. Select the first text box and go to the Events tab. Add an “On Click” and “Scroll to” event, selecting the corresponding page marker SVG image. Below, set a ‘linear’ easing and click OK. Repeat this event for the remaining top menu text boxes, changing the page marker in each instance.

2-2-one-page-scroll-in-your-interactive-prototypes

And that’s it! Click ‘Simulate’ to see and interact with your web prototype. Now you can click between menu items to be taken to the corresponding section in the web page.

Learn more about parallax prototyping with Justinmind here