Parallax scrolling with axure 7

October 9, 2013

Parallax scrolling is that graphic technique that can be seen in quite a few web sites today wherein background images move by the camera slower than foreground images, creating an illusion of depth.

 

 

 

 

How to make parallax scrolling with Axure 7

 

Start by designing three or more dynamic panels. One with a background image (“far from the camera”), one closer and a third one right at front.

In my example I created 3 dynamic panels as follows:

  • Mountains dynamic panel – located it at the background

  • Trees dynamic panel – on top of mountains panel

  • Car dynamic panel – at front

Then, I created a 4th dynamic panel which is actually a panel that combines all the 3 other panels. I named it “All View”

Next, we need to pin the “All View” panel to browser. This is necessary because soon we are about to scroll the page and we would like to keep on having the entire view presented at all time.

 

Next, we need to pin the “All View” panel to the browser. This is necessary because soon we are about to scroll the page and we would like to keep on having the entire view presented at all time.
 

 

Controlling dynamic panels movement

 

The parallax effect can be generated be moving the landscape elements in different speeds related to user’s page scroll action. In our example the car should move faster than the trees and the trees should move faster than the mountains.

We can achieve that thanks to a new page interactions introduced in Axure 7, called “OnWindowScroll“. This interaction is triggered each time user scrolls the page.

We will also use a new parameter called “Window.scrollY”  that actually gives the Y position in pixels where page is located at any given time.

A combination of OnWindowScroll together with Window.scrollY enables moving the dynamic panels in a full sync with user’s action of page scrolling as seen below:

 One last thing…

 

Our main page needs to be long enough to be scrollable… allowing us to scroll for quite a long time while viewing the animations until their end point.In order to do that we simply need to place any kind of widget in a very ‘low’ Y position of  the page, making the page long and blank… In this example I placed some text at  Y=2700

 

 

See it live 

 

Download the RP file

 

Please reload

Featured Posts

Parallax scrolling with axure 7

October 9, 2013

1/2
Please reload

Recent Posts

July 7, 2013

Please reload

Archive
Please reload

Search By Tags
Please reload

Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square