Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
When you think of adding animations to your site, most people would think of Flash, GIFs, or maybe Edge Animates. But there's another option called Parallax scrolling that has been a recent trend in web design. Parallax scrolling is a technique that lets objects on your page move at different rates and directions as you scroll. Let's take a look at how this works. I'm at the webpage Source Sans Pro, which was built by the Adobe Muse team to give you an idea of how Parallax scrolling works. So what I'm going to do is just grab the scroll bar on the side, or you could use the wheel on your mouse or track pad and just slowly start to scroll down, and notice the animations that are happening.
Now, as I scroll down the page, you'll see items move around, and up and around. And if you go fast, you'll see it'll start to move fast. And if you move backwards, you'll see they start to go back in the same directions. It can be kind of fun and overwhelming too to a degree. Just like anything, you want to be careful not to over use any sort of effect. And as we get down to the bottom, it says the End, and you can even download the Muse file if you like. But for now let's jump back into Muse. I'm inside this muze file, and we're going to go to the homepage. And let's hit Preview to see what I've already built.
While I'm in preview, as I scroll down you'll see various items in the page will start to move around. And then as I get lower on the page, we just have some static items here. Now if I select one of these items that was moving, such as the letter s, you'll see it happens to be inside its own frame. And there's a guide that shows up directly above it that's pointing all the way to the top. Inside my Scroll Effects panel, which you can get access to by going to Window > Scroll Effects, you'll see that we have motion enabled. And it's telling me that the initial motion from the top and to the right is not moving any direction at all.
But after the final motion, it's moving down at 1.5x the browser speed. And if I grab a different one of these, you'll see there's different numbers put in. If I wanted to, I could grab the start field and put it at different spots. So it's saying that hey, when you get to this spot while scrolling, start the animation. But if I put it back to the top, it'll start animating immediately when I start to scroll from the top of the screen. But what we're going to do is jump down to lower on this page And I've got a guide placed at exactly 1400 pixels. I'm going to go to this first image and turn on Motion.
You'll see that I have the edge set to right at that 1400 pixels. And the motion is set to move to the left at three times the speed, and afterwards move to the left at three times the speed. The right image will turn on, and we'll see we have it at 2X the speed for both of them. And for the last one, we'll turn this one on and set 1.5X. Now when I go into Preview and I start to scroll, you see initially, there's not much here. But as I start to come in, right at 1400 pixels, we'll see the images show up exactly how they were.
Which was slightly above where it says, see our exquisite collection of paintings. And then as I scroll past, it moves again. Back in the design mode, if I want to change this, I could come in here and change the numbers even more. But I'm pretty happy with how they behave right now. Some other attributes that you can change are the opacity. Or if this was a slideshow, you could control the slideshow as you're scrolling down on the page. Or if you had an Edge Animate file, you could control the Edge Animate animation. As you can see, parallax scrolling is a somewhat powerful but confusing technique.
The first few times you try it, it may seem like it's not working. But don't despair, my recommendation is just to keep playing with it and trying different options. And eventually, you'll get the hang of it.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.