Parallax

Parallax website layouts include UI elements that move at different speeds to the site background, or stay fixed while you scroll.

Pinned Elements

In Justinmind, you can use Pinned Elements to create sticky components that stay fixed in certain positions as you scroll the page.

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. To recreate our example, first drag an H2 widget and three Paragraph widgets from the Web Wireframing UI library (find out how to install this library here) onto the canvas and position them as below.
    • Widgets web wireframing library
  2. From the same UI library, drag a rectangle and two Picture widgets onto the canvas and position them as below. These Picture widgets will represent placeholders in your prototype.
    • Alternatively, you can use basic pre-installed widgets like Paragraphs and Images.
    • Picture widgets placeholders
  3. Drag a Header widget from the Web Wireframing library onto the canvas and place it at the top.
    • Header widget web wireframing library
  4. With the Header still selected, go to the Properties palette. Under Position, click on “Display pin position options”.
    • properties_Palette display pinned positions
  5. 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 remain fixed 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. Repeat the steps to create a sticky header, but place a Footer widget from the Web Wireframing UI library at the bottom of the screen.
  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 fixed 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 fixed while the background moves.