Parallax

Parallax website layouts include UI elements that move at different speeds to the site background, or stay fixed while you scroll. To create Parallax effects in Justinmind, we will use Pinned Elements. You can learn more about pinned elements here.

Pinned top (sticky header)

A pinned top element will stay fixed at the top of the screen while you scroll.
Pinned top header parallax element

Follow along with these steps to create a pinned header:

  1. Create a Header by dragging a Rectangle widget to the top of the Canvas. In our example, we’re using a pre-made Header from the Web Wireframing widget library.Header widget web wireframing library
  2. With the Header still selected, go to the Properties palette. Under Position, click on “Display pin position options”.properties_Palette display pinned positions
  3. In the ‘Y’ parameter, click on the dropdown and select “Pin to top”.pin to top
Note: In the Outline palette, make sure the elements you want to be pinned are above the other elements.

Click “Simulate” and the header will stay at the top of the screen as you scroll.

Pinned bottom (sticky footer)

A sticky footer will stay pinned to the bottom of the screen as you scroll.
Pinned bottom footer parallax elements
Follow the steps below to create a sticky footer:

  1. Drag a widget to the bottom of the Canvas. In our example, we’re using a pre-made Footer from the Web Wireframing widget library.
  2. In the ‘Y’ parameter, click on the dropdown and select “Pin to bottom”.Pin to bottom

Now click “Simulate”. The header and footer stay pinned while the background follows the scroll movement.

Pinned to right (fixed pop up)

A fixed pop up will stay pinned to the right hand side of the screen as you scroll. This can be helpful for showing an important alert or message to users.
Fixed popup parallax element
Follow these steps to create a pop up fixed on the right:

  1. Drag a Rectangle widget onto the screen, placing it anywhere on the canvas. Add some text to style it.Rectangle widget popup
  2. In the Properties palette, under Position, click on “Display pin position options”.Display pin positions
  3. In the ‘X’ parameter, click on the dropdown, and select “Pin to right”.Pin to right
  4. In the ‘Y’ parameter, click on the dropdown, and select “Pin to center”.Pin to center

Click “Simulate”. The popup will stay pinned to the right of the screen and remain there while the background moves.