Learn how to prototype web and mobile apps

Parallax prototyping with Justinmind – Tutorials

With Justinmind, you can build unique web and mobile prototypes using parallax scrolling and other parallax effects, and view and test them in any browser or on actual devices. For an idea of what you can create in Justinmind have a look at this exampleSee here for creating a parallax scrolling effect in your prototypes.

When you choose a web canvas as a starting point, the widget panel will automatically load the Parallax elements library, made of ready-to-use parallax widgets that you can drag-and-drop into your design and combine with other design elements. If you are creating a prototype for a different device, you can load the library by clicking on the “Add/Remove libraries” icon in the Widgets panel.

Parallax Widget library

The Parallax elements widget library includes the following pre-built working widgets, and you can learn how to use them by clicking here and downloading the examples:

  • Floating menu: this will let you create a fixed position menu in your web or mobile prototype. The menu will remain visible on top of the screen when scrolling, providing easier navigation for the user.
  • Slide-in layers: adding a Slide-In on Scroll effect to your prototype design allows you to slide in elements from the edge of the page into the visual viewport, as you scroll down.
  • Pinned layer: by using sticky elements on scroll, you will be able to pin an element to a specific location in your web or mobile prototype, so it is always visible as you scroll down.
  • Pinned panels: pinning panels to a specific position in your web and mobile prototypes allows you to create fixed elements that stay in place and are always visible when scrolling, e.g. headers, footers, sidebars.
  • Fade in layer: an initially invisible dynamic panel will become visible with a transition effect when a defined point has been reached by scrolling.
  • Scrolling speeds: use different scroll speeds for different elements, in order to provide additional effects to your Parallax scrolling.
  • Parallax from scratch: learn how to create a simple fixed scroll menu with this tutorial.
  • Create a one page scroll: learn how to create and simulate a one page scroll in your web prototypes with this tutorial.

If you are creating a parallax scrolling web design we also recommend you check out this handy 5 step guide to prototype with parallax scrolling.

Give it a try and create unique user experience with Justinmind!

Next tutorial: How to design a fixed position menu