(This post is part three of a series. Part one is here and part two is here.)

There’s something so satisfying about a fun and playful one-page website. And these days, the feelings of playfulness and engagement produced by a good one-pager are often enhanced using scroll effects—special movement or visibility behaviors that happen as a reaction to you, the visitor, scrolling down the page. Scroll effects are easy to achieve in Axure RP using the conditional logic feature.

(If you’re unfamiliar with Axure’s conditional logic feature, start with our training article on conditional logic.)

First, download and preview my example .rp project file and/or have a look at the output of my example file, hosted on Axure Share. (Feel free to compare it to its inspiration, the award-winning lookbook site for Melanie F children’s slippers—though beware the auto-playing soundtrack!)

Note: The prototype’s text will look understyled on the canvas in Axure RP (though fine in the browser) unless you download and install the Google Fonts I used: Lobster and Raleway.

Animation showing scrolling through an Axure RP prototype with scroll effects

A few different scroll effects are happening here:

  1. Perhaps most immediately noticeable is the parallax scrolling, where different objects are moving at different speeds. (This particular effect doesn’t require conditional logic to achieve, just a math formula. More on that in a moment.)
  2. We also have a couple of visibility effects: the textual elements clustered together with the logo at the bottom center of the screen disappear one after another as the page is scrolled.
  3. The floating shapes in the background change color at a certain point.
  4. And finally, there’s a a scrolling sticky header: an element (the logo) that starts out lower on the page but sticks to the top and stays there. (I won’t go into detail about that effect in this article because we have a dedicated scrolling sticky header tutorial.)

Let’s dig in to the file.

Parallax scrolling

There are several ways to achieve a parallax scrolling effect with Axure RP. In this prototype, I do this by putting everything that’s going to scroll at a different rate from the rest of the page into a pinned dynamic panel called “parallax scroll content panel”. (In case you’re not familiar, here’s our training info on the dynamic panel widget’s “pin to browser” feature.)

Once I’ve pinned that content in place so that the web browser won’t move it at all when scrolling, I use an OnWindowScroll case to restore a fraction of that movement. The action in the case is a “move to” action.

I don’t want my content to move left or right when the page is scrolled, so I set the “x” coordinate value in my move action to the following:

[[Target.x]]

This just looks at the target widget’s “x” coordinate value before the move action and sets it to the same thing after the move.

For the “y” coordinate, here’s the formula I use:

Y = SP + (-Window.scrollY * SF)

Where “SP” is the starting position of my widget and “SF” is the scroll factor by which I want it to move when the page is scrolled. The scroll factor should be between zero and one, and represents how much the widget will move when the rest of the page is moved by one pixel. For example, here’s the “y” expression I’ve used for the page’s title text, pulled straight from the .rp file:

[[65 + (-Window.scrollY * 0.33)]]

The “65” is in there because the page title’s starting position is 65 pixels down from the top of the page. The “0.33” is the scroll factor, meaning that the title will move at one third the rate of “regular” page content.

Visibility effects

Notice how the “scroll” label and the vertical line below it disappear just after you begin to scroll down, and then the company name follows shortly after. Like the parallax effect, these visibility change effects are achieved with a case—or a few—on the page’s OnWindowScroll event. Unlike with parallax, these cases each require a condition to check your visitor’s progress down the page. Here are the relevant cases, conditions, and actions from the example file:

OnWindowScroll

 show scroll-dependent elements
(If “[[Window.scrollY]]” is less than or equals “200”):
   Show scroll prompt fade 500 ms
   Show company name fade 500 ms

 hide scroll prompt
(Else If “[[Window.scrollY]]” is less than or equals “880”):
   Hide scroll prompt fade 500 ms
   Show company name fade 500 ms

 hide company name
(Else If “[[Window.scrollY]]” is less than or equals “2380”):
   Hide scroll prompt fade 500 ms
   Hide company name fade 500 ms

I’ve used the “less than” instead of the “greater than” operator because I want to make sure that only the relevant case’s conditions will be satisfied at any given moment. If I used a condition of “greater than 0” for my first case, the condition would always be satisfied no matter how far down the page my visitor scrolled—and none of my other cases would ever fire.

Color change effects

Animation showing scrolling through an Axure RP prototype with scroll effects
Notice the company name fade away just as the background shapes turn orange.

The astute reader may have noticed that the cases shown above don’t quite match the ones in the .rp file, which include additional actions. Here are the full cases, with the new stuff bolded:

OnWindowScroll

 show scroll-dependent elements
(If “[[Window.scrollY]]” is less than or equals “200”):
   Show scroll prompt fade 500 ms
   Show company name fade 500 ms

 hide scroll prompt
(Else If “[[Window.scrollY]]” is less than or equals “880”):
   Hide scroll prompt fade 500 ms
   Show company name fade 500 ms
   Set triangle panel to blue,
   waves (small) panel to blue,
   circle (small) panel to blue,
   hexagon panel to blue,
   waves panel to blue,
   triangle (small) panel to blue,
   square panel to blue,
   circle panel to blue

 hide company name
(Else If “[[Window.scrollY]]” is less than or equals “2380”):
   Hide scroll prompt fade 500 ms
   Hide company name fade 500 ms
   Set triangle panel to orange,
   waves (small) panel to orange,
   circle (small) panel to orange,
   hexagon panel to orange,
   waves panel to orange,
   triangle (small) panel to orange,
   square panel to orange,
   circle panel to orange

Although they look long, these two new portions are just a single action each. The floating shapes in the background of the page are actually each two-state dynamic panels containing a blue an an orange version of the shape; these actions switch between the two panel states, creating a color change effect.

Note: If you really wanted to switch between just two colors, you could also take an approach of recoloring your shape’s “selected” state and then selecting/deselecting via actions, allowing you to skip the dynamic panels. I’m presenting the dynamic panel approach because it’s more extensible, say if you wanted six different color states.

– – –

That’s about enough for today! Please write in to contactus@axure.com if you have any ideas for other sites you’d like to see me rebuild in Axure RP.

Share this: