Lessons

Lesson Info

Create Scrolling Effects

So the next thing I'd like to talk about is working with what are called scrolling effects. To me, these are one of the coolest things in Muse. Just because you'll see a lot of sites out there and there were a lot of sites like this back in the day. They're becoming a little bit fewer, but let me actually show you what I'm talking about. I have a final version of the site open here and what I'm gonna do is open it up in my browser and I think I've got the home page, let me open up the correct page here. I'll open this up and go out to the browser and show you what I mean. Whenever you go to sites that are really long, really tall vertically, a lot of times you'll see things like, "Hey, scroll down to see more." And instead of just having content be there as we scroll down, what we can do is make it to where we can actually see content appear. Let me show you what I'm talking about here. I wanna open it up in the browser, so I'll come up under File and I'll go to Preview Site in Browser...

, that way I can see all my pages. When you work with these scroll effects, there's a couple caveats to them. I'll talk about them, but there's some really amazing, really cool things you can do with them. I'm gonna go over to this portfolio page and you're gonna see a command or something saying, "Scroll down to see more." And as I scroll down using the scroll wheel, using the bar over here, you're gonna see what's gonna happen here. We can have these scroll effects kinda kick in. There are a couple different things happening here, we're having things slide in, or come in. We're also having things fade in. There's four different things we can do with scroll effects. With scroll effects, let me go back over to Adobe Muse. With scroll effects, we can do things like make it so we have things move in, we can have things fade in, we can play a slide show, we can also play animation. So what I wanna do is open up a site that is kind of a starting point for this and give you an idea of how this works. Let me go open up that site, this is the start version of it, and I'll open up this page. This is the Portfolio page. Like I said, when we go to do this, we're gonna kind of select individual content. We're gonna start to tell it as we scroll through the page. It's gotta be a taller page, because if you have a really short page, this isn't gonna make any sense. Unless you do the slide show, I'll show you that. But if we have a really tall page and we have content moving, we want to select the individual objects usually, or content groups, and tell them what to do as we scroll through the page. The caveat to this is, we wanna actually have a breakpoint set up that is static. We're not gonna do this with a responsive breakpoint. So if I go up to the breakpoint bar up top above the page up here, you're gonna see this purple bar. I double click on that, you're gonna see right here that we wanna make sure that instead of having a fluid width, which is what a responsive site's gonna have, we wanna have a fixed-width breakpoint. If that means that you have a responsive site that actually has a bunch of breakpoints, and you make a small one just for desktop, you're gonna, I guess you could say, pinpoint the desktop. You go in, create a breakpoint, double-click or set it up to be fixed. You can see right here that I actually have it set to a fixed width. That's the only way this is gonna work. If I come over to the right, you're gonna see that we have our Scroll Effects panel on the right. If you don't have the breakpoint set as fixed, it's gonna say something to the effect of, "You need to have a fixed breakpoint." I've got that set, and what I can do now is I can go to individual objects. Let's say I've got this image, and what I wanna do is I wanna make it to where, as we scroll down the page, I wanna have these two objects come in from right and left. We'll also do a fade, but we'll do that in a little bit here. If I come over to the Scroll Effects panel, you'll see that I have the four that I mentioned. I've got the Motion, I have Opacity, I have Animation, or this is the Slideshow, and Animation at the end there. So what we can do is, a lot of people will use this Motion one to kinda get started. So with Motion, you're gonna select an object, usually just to start. I'm gonna come over there after setting my fixed breakpoint. I'm gonna turn on the actual scroll effect for the object and if you look at the object, you'll see that we have this little bar up here. If you come over to the right and you look, you're gonna see we have this what's called Key Position. This little T at the top and that little circle is the Key Position. This is a little confusing when you first start. But as you learn, you'll get it. Let's explain this. We have what's called an Initial Motion, then we have the Key Position, then we have what's called a Final Motion. The Initial Motion actually happens kind of up here. Before this T reaches the top of the browser window, it's gonna perform the Initial Motion you set over here on the right. Now what does that mean? That means that if you look on the right over there, you're gonna see that we have the ability to actually move this object horizontally and vertically before the T hits the top of the browser. Just think that way. If you look over there on the right, you're gonna see that right now it's not gonna go in and do anything, except for come in from the left. Typically when we set this up a little different way, we're actually gonna make it to where if we start here, you're gonna say it's gonna move up initially, that's what it does by default, and if you look over at the right over there, you're gonna see the number one in there. That actually is the speed that matches the scrolling speed of the browser. So one matches the speed of the browser. So as I drag, it's actually gonna move in the same direction as the browser content. It's gonna go up essentially. That's pretty much default. Now what we can do is we can say, "You know what, I really don't want that to happen" or "I want that to happen." Let me actually test this, out I'll show you this. We have the Key Position which we can come out here, I can set this by dragging anywhere I want. That's basically just saying the initial motion up here, this is how long it's gonna take until this T reaches the top of the browser window. Then we have what's called the Final Motion. So we could say, "I want you to come in from the left side "of the page right here, and as soon as that T hits the top "it's gonna be in position." After that, we can say, "Then I want you to scroll up "with the page," or "Stay in place," or "Move off in the other direction, maybe to the right." That type of thing. That's called the Final Motion. Honestly, you really have to just play with this. You really have to try it out to see what it says. If you look over here you're gonna see Initial Motion is gonna go up at the same browser speed. When this little T hits the top of the browser window, it's gonna be in position. Then it's gonna have what's called the Final Motion. The Final Motion right now is set to keep moving up, you're gonna see the up arrow selected, keep moving up at browser speed. What I'm gonna do is I'm just gonna preview this page in the browser and we'll just try it out. It's gonna be relatively boring. If I come out here and take a look, you're gonna see that this is the one we have set, let me refresh this... Now it's actually doing the final. There we go there's the start. If I go down, you're gonna see exactly what's happening here. Initial Motion, it's gonna go up with the browser content. As soon as that T, pretend the T is there on the page, as soon as that T hits the top of the browser window, it's gonna perform the Final Motion. The Final Motion said to go up, keep going up, at browser speed. Pretty boring, alright. So let's try something. I'm gonna go back over to Muse, I'll close the browser windows here. Back over to Muse, with that object selected, I want to do this. I want to say, "You know what, "let's not have you move up or down. "I wanna have you come in from the left." So Initial Motion, we're gonna say, "You know what, "I don't want you to do anything vertically, "don't go up or down, but I want you to move horizontally. "We're gonna move you from the left to the right, "so we're gonna have you go to the right, "and we're gonna set a speed of something like two." Now what's gonna happen here is it's gonna say, from the top of the page to that T, it's gonna move in from the left. That's the Initial Motion. "Two" means "twice the browser speed." You're gonna find that you need to do this, simply because you gotta set it up that way. Let me go out there and I'll show you what I mean. If I go under File, and I go Preview Page in Browser and I start checking it out, it takes a little while because we're setting things up here. Look what's happening here. As soon as that T hits the top, it's gonna be in position where I have the design. Then it's gonna do the Final Motion, which means just keep going up. I'm hoping that makes sense. Once you try it out, and you mess with it a little bit, let me go back over to Muse, you gotta make sure that you need to set that motion, or that speed right there, higher than one. Otherwise if you set it low, it's not gonna be far enough off the edge of the page. The higher the number, the further it's gotta travel, so you wanna have it as a higher number. The last thing I wanna do here as far as this is concerned, I can go in now with Scroll Effects, I can set Opacity on this. So I could say, along with moving from one edge or one direction, I can set Opacity and I can say, "I want you to start at 0%," meaning, "I want you to be basically transparent." We're gonna go to 100% transparent. Right now it's saying, "Fade out to 0%." I'm gonna set that one at 100%. What I'm trying to do here is I'm trying to make it to where from the top of the browser to this top button right here, you're gonna see three new little buttons here, it's actually gonna go from zero to 100% in its position. Take a look right here, from here to here it's gonna stay 100%, and then from here to here it's gonna keep 100%. It's gonna stay at 100%. You can actually set it so it maybe comes in as transparent, comes to fully opaque, and then goes out to transparent again. You've got three options there. I'm gonna keep it as 100%, so we're saying start transparent, 100%, 100%. I can move these around if I want to, so it takes more or less time, and this is where you just gotta try it out. You really do. This is just kinda working with it a little bit. Let me go out and show you what this looks like. I go under File, Preview Page in Browser. So we're gonna have the Motion happening, we're also gonna have the Opacity kicking in. So you can see there it is. Now before, if we had it set at Default, it would have went from 0% to 100%. At this point, it would have started to fade out to 0%. So we want to make sure that we set it that way if we wanna keep seeing it. With scroll effects, it's gonna take some time to kinda play around with them a little bit. But you can put a lot of different types in there. We can do, like I said, we also have slideshows. If you put a slideshow out on your page, like an image slideshow, you can make it to where as you scroll up, it changes the slides. It'll automatically go from one slide to the next. You can combine these different types of scroll effects together, maybe have a motion one where it stays in place, and the slides just keep going one to the next as people scroll up and down. There's a lot of things you can do here. I wanted to give you kind of a quick overview, with a little more advanced feature of working with scroll effects.