Parallax scrolling with axure 7
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
