Create a parallax scrolling effect by adding a case to the OnWindowScroll event that moves content by a factor of the [[Window.scrollY]] value. Learn how to change the factor, to make it look like the parallax effect is faster or slower.
- [Narrator] Parallax scrolling is an effect that makes it look like some parts of the page are moving at a different rate than the rest of the page as we scroll. On this site, we've got a background image here that's moving slightly differently than the rest of the site as we're scrolling. Parallax is a really cool effect, so let's see how we can set it up. And if we want to set up a parallax effect, we'll need to use the on window scroll event since this is something that we wanna have happen when we're scrolling. To get that parallax effect on our background image, we'll need to move that background image at a slightly different speed than the rest of the site. I'll select a move action here, and select that background image, and then I'll use move to because we need to move it to a specific set of coordinates.
We actually don't want to move that background image at all horizontally, so I can either blank that out or use target.X to leave the x-coordinate the same. For the y-coordinate, I'll click the function button here and delete that zero and then I'll go grab the window.scrollY property from our list of variables here. If we multiply this scrollY value by a factor, it will make it look like our image is scrolling at a different speed than the rest of the page. If we multiply it by a zero point five, for example, it'll look like it's scrolling half as fast. When we preview our prototype now, we'll have that nice parallax effect on this background image here.
Now there are some different ways that we can customize this parallax effect, so let's take a closer look at how it works. When we're working in Axure, the top left corner of our page is going to have an x- and y-coordinate of zero zero. When we first load up the site, that zero zero coordinate is right at the top left corner of the browser window, but as we scroll, we're moving our whole page up so that zero zero position moves up along with it and it actually ends up way up above the browser window. This is important because when we use the move to action for widgets on our page, as long as they're not inside a dynamic panel or anything, we'll be moving those widgets relative to the top of our page, not to the top of the browser.
So what we're doing with our background image here is that, as our page is scrolling up, we're using move to at the same time to move our image back down the canvas. And we're moving it proportionately with window.scrollY, which is the amount that we've scrolled up. Since we used a factor of zero point five in our example, we're moving our image by half the amount that we've scrolled. It's like moving the background image down one pixel for every two pixels we've scrolled up. We can use different factors than just zero point five, though, and if you open up and preview the parallax samples exercise file, there're some examples here that will give you an idea of what happens when we change that factor.
When we use a smaller number as our factor, like these over here on the left, that will make our widget look like it's scrolling slower than the rest of our page, and the speed will increase as the factor gets bigger. If we use a factor of one, like the widget in the middle there, that's going to make it look like our widget is staying exactly in place because we're moving it down the canvas exactly the same amount that we scrolled up. That's how we can set up sticky header effects and things like that. And over on the right, where the factors are greater than one, well that's going to make our widget look like it's scrolling faster than the rest of the page.
So they'll actually look like they're moving down. And the bigger the number, the faster they'll go. I'm going to open up the sidebar on this preview so that I can get to this second page with some negative values. Using a negative value for our parallax effect will reverse the direction. In that case, when we're scrolling down, it's like we're giving an extra push in the upward direction to our widgets and moving them up even faster. On this third page, you can see the positive and negative values together so that you can see how they compare. There are also some other sample pages in this exercise file so that you can see how these scroll factors work with a background image.
For negative values like this one, you'll need to make sure that your background image is large enough that it has some extra runway, otherwise you're going to end up with a blank space when you're scrolling. For these positive factors down here, that's not going to be a problem because the image will be scrolling up more slowly than the rest of the page so you won't ever run out of room as you're scrolling. Here's that factor of one, which makes it look like our image is staying right in place. And then these factors that are greater than one are going to make it look like the background image is scrolling down, so it's not really going to work for this but if you wanted to set up some other special effect and make a widget look like it was zooming down your page, it would work for something like that.
So that's the basic idea of how we can set up parallax scrolling in Axure by using a move to action and moving a widget to a factor of window.scrollY
- Using variables in Axure
- String methods in Axure
- Truncating text strings
- Formatting dates and times
- Setting up a looping animation
- Setting up a responsive background image
- Positioning widgets in the browser
- Repeater and item properties