Adding scroll effects to your website with Adobe Muse CC allows you to add motion and interest to your webpages, which are "activated" when your website visitors scroll through your pages. Available scroll effects include motion, opacity, slideshow and edge animate. This video explains what each scroll effect means and how to apply and time scroll effects to your webpage elements with Adobe Muse CC.
- View Offline
As you've just seen in previous movie Parallax scrolling can add somewhat of a different layer of interactivity to your website and really set things in motion, quite literally. And so in this movie I'm going to show you how to get started using the Parallax scrolling panel inside of Adobe Muse. So what we're going to do here is we're going to double click here on the home page and I'm going to scroll down. And we're going to look at these thumbnails right here at the bottom. These are the thumbnails that we're going to animate. And I'm going to do this with just one of them to start of with.
And if you don't already have it open, just go ahead and open the scroll effects panel. If you can't see it, go to window and select scroll effects. When you open this up, you're going to have four different choices. You're going to have motion, opacity, slide show and edge animate. In this case, we're just going to animate motion here. We could animate opacity, if we wanted to, I'll show you how to do that in just a moment, but for now, let's just worry about the motion property. So for this, what we're going to do is set an initial motion property for this little guy. And, really, what you need to pay attention to is this little stem that comes over the top hear and what this signifies is where the browser window has to scroll down to in order for the initial motion to take effect.
And so in this case it coming down to about 686 pixels and Im telling it ok. What I want you to do is start moving up and to the right. So it's going to move up here and it's going to move to the right as it comes down through. so basically, what's going to happen is: little dog is going to appear to be completely off the screen. Then as well scroll past this point, the little dog is going to come into the frame and he is eventually going to sit right here at his normal position. Now the final motion indicates how the dog is going to exit the screen as we scroll past him.
So as we scroll past him, what's going to happen? Well he's going to move out to the left, so there's no movement up to the right. There is only movement, out to the left. As if want to him up as well, you can, but in this case, I am just going to move him out. Three times the speed of, at which I am scrolling. Same as I did up here. So, let's take a look at this. Let's preview this. And so, as we scroll through, watch what happens. As I get down, about when the beaker gets underneath the blue banner, right here. So, as we scroll through, see there's no dog. No dog. And then, here comes little dog.
He's coming in. And, right there he's in his normal position. And then, he's going to start exiting as I scroll past. So, it's an interesting little effect and, you know. If you do it too fast you almost miss that he's even there. So there are certain use cases where it's good. Certain use cases where's it's bad I think. But, this is a good example of making one thing kind of fly in and fly back out after you're done with it. So I'm going to quit the preview, and let's go in here and let's add some more scroll effects to all of these.
So I'm going to add motion to this guy. I'm essentially going to copy the motion of the dog cause I want these to come in at the same time. So we're going to go 3.5 x the speed right here. We're going to make him move in from the right. No motion on the vertical. 685 pixels that's round about the where the dog came in and so that looks good. Final motion eh, we don't want them to go up at all. So lets set that up to 0. And then this one right here 3.5 speed looks good. Same down here. Lets enable the motion.
3.5. Zero. Zero. 3.5. 685. And there you go. Then we'll enable motion here. Zero. 3.5. 685. And zero. Now, once we have all those set let's do another preview. And so basically the whole left side should fly in and then fly back out as we scroll down. So there they come. Just like that, they're all going to come in and then they're all going to exit out. Kind of neat. If you want to change that up a bit. Go in here and change the speed at which they scroll.
so in this case here, let's do this at two. Let's do this one at four. And let's do this one at one. Something kind of like that. And then let's preview it again. You can kind of get the hang of this. This is all it is, really, is just a lot of playing around with it, until you get it.' because when you first get in here, this panel is extremely overwhelming, I think. And it takes a while to really understand how all of it works. And so, here, you see they're all scrolling at different rates. And they're all coming in at different times, and that's kind of neat. And so you can control all of that if you want, and so let's do something here.
Let's change this as well. So let's change this right here. Let's do this at two and let's do this at one. Let's do this one at four, and let's do our friend the dog. Let's do him at 2.5. Something kind of like that, and if you want to start these at different points you can start them at different points as well. So maybe this one starts at like 650, maybe this one starts at let's say 665 and maybe this one starts at about oh, let's say 690, something like that.
Just give them a little bit of variance that way everything kind of flies in at different times. Hit preview [NOISE] And then as we scroll, watch how they all just kind of come in at different ways, different times. And then they're all, of course, going to exit at different times. You can set up the timing to make sure that everything kind of gets to where it needs to go eventually. I mean, it, it's kind of complicated. [LAUGH] But. After a while, you really kind of get the hang of the timing and the positioning and all that good stuff. And you can create some really interesting things.
It just takes a long time to really get adept at using this panel correctly. And unfortunately more time, I could actually probably spend an entire course talking about parallax scrolling. But in this case I just wanted to give you an idea of how it works and how you can introduce some of these effects into your images. Now, let's remove some of these. So, I'm just going to undo some of what I've done already. So, I'm going to step back here. And so we'll just Cmd or Ctrl-Z until we get back to our original setup here.
And once we get back to everything normal. Let's go ahead and take a look at the opacity scroll effect. And so what I'm going to do is just do an opacity effect here. And so what I can do is say alright up until about let's say right here, I want this to be completely transparent. And you can make a change to this if you want. You can adjust this number as much as you want. I'm going to say until about right there at 760. Okay. We want that to be completely transparent.
And then when it gets to right here, I want this to be at 100%. And again you can make adjustments on this all you want. So, let's do it at about 760, somewhere around there. And then about 883 for that. And then if you wanted to exit out, you can. In this case though, I am going to change the last number to 100%. That way, it stays at a 100% the whole time. So now, let's preview this. And so once I preview this, watch what happens. As I scroll down, the dog is going to appear not to be there.
Then as we get right about here, the dog is going to start to come in and there it is. Just like that. So as we get to right there. Now if you want to change that, just close that up and raise the bar a little bit, and then we'll preview it again, and then as we scroll watch this time it comes in a little earlier. There we go. That looks much better. And he stays at 100%. So these are actually I think more effective. Then the Parallax scrolling.
Parallax scrolling is good in small doses. You can use this opacity thing as much as you want really. And so if you wanted to apply those across the board you can, I'm not going to take the time to go through every single one of those, but you get the idea. It's really cool how we can just scroll through, make this thing come in. If we wanted to make it scroll out and we scrolled over it we could. But in this case I think it looks good just doing that. If you want to experiment with this, try some of these other ones here and you can just kind of manipulate these however you want.
Again, just adding that opacity effect, I'll just do it to the top row so you can kind of see what's going on here and then we'll test it out one more time after that. There we go and now let's preview it one more time. And so as of right here, they're going to start coming in, there they go. Now these I didn't set them to 100%, so they're actually going to fade back out as well. There you can see the fade out. If you want to get rid of that, that's very simple. Just come back and change that last number to 100%.
One more time. There we go. Now preview it. And all these guys are going to fade in. [NOISE] Just like so. Pretty! So, using the scroll effects panel, like I said, is a great way to add just a little subtle nuance to your website. You can also add some subtle motion in there using parallax scrolling. Again, that's going to take some time to get used to. But once you get the timing down, and the coordinance down, and all that kind of stuff. It's really going to aid in creating a more rich and engaging experience for your audio.
So, I highly recommend exploring it a little bit more, playing around with the opacity and parallax controls and just see what you can come up with. The sky is literally the limit. There is no rules. It's totally up to you.
- Becoming familiar with the Muse interface
- Creating a sitemap
- Setting up master pages
- Working with headers and footers
- Importing and embedding graphics
- Scaling, rotating, and aligning page objects
- Wrapping text around images
- Working with web-safe and Typekit fonts
- Creating links
- Adding menus for navigation
- Inserting an interactive map
- Adding a Facebook Like button
- Building a Business Catalyst form
- Exporting the site to HTML