Join Paul Trani for an in-depth discussion in this video Understanding scroll motion, part of Creating a One-Page Scrollable Website with Muse.
- View Offline
Scroll motion effects can really make a site look dynamic and really does bring it to life, but it can get a little tricky wrapping your head around how it works. So I'm going to close this home page, and in order to do that we're going to add a new page and this is just going to be our test just so we can understand how scroll motion affects work. All right, first thing I need to do is I need to make my page really long so we can scroll it. So we'll go to Page and change the Page Properties the minimum height to about 3,000.
All right. So it's going to be a really long page. Clicking OK. Now, we can dive into having some text move. So, select the text tool. I'm just going to type in, we want this to scroll down and to the right. That's what we want to do with this box of text. All right? So, that's the goal. So, selecting that text, opening the Scroll Effects panel, I want to change the motion. So, selecting motion, you're given a series of boxes and essentially there's the initial motion.
So this is the direction and speed it will go for the first 87 pixels as you scroll down the page. All right? So notice how it's going to actually not do anything because the vertical speed is set to 0. Well if I want it to scroll exactly with the page I type 1 in there. If you wanted to go left or right, you'd type in 1 there as well, but again I just want it to stay with the scroll of the page so it's going to be 1 and then 0. Now remember this is going to happen for the first 87 pixels. What if I want to change this? Well, I can move it down.
In fact, you'll notice this option right here, being able to adjust the key position. So I can drag this up and down, but I can adjust this to about say around 200. So for the first 200 pixels it's going to be in this spot and scroll with the page and work normally. Now, once it hits those 200 pixels this is where it gets really interesting, because we want it to go down and then to the right. So it's going to go down at a rate of 1, and then to the right at a rate of 1 as well.
With that done, I'm going to save this page, and we will just preview this page in a browser. There's my text. Scrolling down, down, it'll hit the 200 pixel mark, and now it's scrolling down into the right. You can see how that works. Scroll down, acting normal. Bam at that point scrolls down and to the right. So let's play with this a little more. In fact, taking this text we can copy it and paste it. So here's another text element. And I can bring this right over here and I can scroll it up and to the left slower, all right, that's what we're going to do now.
So for this text, just adjusting this box. We do want to scroll it up and then to the left and we want it to go slower. So 1 is the speed of the browser, we do 0.5, it's going to go half the speed of the browser, so this ones going to go slower then this one. So I'll move that over. In fact, we will do a copy and then a paste one more time, and this will be, again, our last one that we drop in here. We want this to go basically, scrolling up and to the left faster.
All right. That's what we want to do. And in order to make it go faster, we'll do 1.5. With that done, we will preview this in a browser. Remember, they're all set to 200 pixels, so it's not going to kick in until I scroll down 200 pixels, and when it does, you can see scroll up to the left slower, up into the left faster. And you can see how that dynamic motion starts to get implemented just like that. And the last thing I'm going to do, is I'm going to create a box, like this.
And as you can see, I'm going to have this box, and I'll just change the color to black. And in this case, I want this box to scroll up and then I want it to stick to the top of the browser. So, selecting that bar, turning on the scroll motion. I want it to have an initial value of 1, change this to 0. I always want it to scroll, in fact I can adjust this a little more as well. In fact, as soon as this bar hits the top of the page, that's when it's going to stick to the top of the page, the top of the browser.
So the final motion is actually going to be 0, because we don't want it to go anywhere at all. Okay, so we're going to scroll, till it hits this position, till this is actually at the top of the page, and then it's going to stop. So this is great for navigation. I'm going to preview this page in the browser, scrolling down you see all that motion, and then you see how it sticks to the top. And that's great for navigation. Not only that, you can have plenty of animation and moving text and images, as well using scroll effects.
So that's a quick overview, now we can go ahead and apply this to the project we're working on.
- Creating and importing graphics
- Pinning content to the page
- Adding scroll motion
- Controlling the rate at which items scroll
- Adjusting the opacity as items scroll
- Adding Edge Animate animations that are controlled by the page scroll
- Adding navigation and other links
- Adding widgets
- Publishing and tracking the site