As web designers, we want people coming to our sites to do more than dip their toes in the digital waters — we want visitors to be immersed in the experience. Scroll effects entice your viewers with interactive animation and the illusion of depth, and they're easy to create with Adobe Muse CC. So why not take the plunge?
After you read this article, you'll understand how to create all the scroll effects you see in The Deep Blue Scroll, a demo site created in Adobe Muse. They include page elements moving and changing opacity as a visitor scrolls a page, and layered parallax experiences composed of page elements such as placed images, background images, text frames, Slideshow widgets, and elements created in Adobe Edge Animate CC.
If you're ready to dive in and produce your own scroll effects, download and install Adobe Muse. Next, visit the The Deep Blue Scroll site and scroll down to watch the elements animate. At the bottom of that site's page, click the "download the Muse file" link to get the sample files you'll need to follow along with this article. Uncompress the ZIP file (1.8 MB), and save the sample files folder to your desktop. The folder contains the project file and a folder of site assets.
To better understand what goes into The Deep Blue Scroll, take a look at how the project is constructed:
Delve into each section by clicking the arrows next to each layer name to expand the layer and see a list of its elements. Like the layers themselves, the order of the elements in each layer dictate whether elements display above or below other elements on the page.
The Deep Blue Scroll site uses layered elements in conjunction with scroll effects to create the illusion of motion graphics that weave between other elements on the page.
Before clicking away to close the Browser Fill menu, notice the Scroll tab. Although not used in this sample project, you can use the settings in the Scroll tab to apply scroll effects to a browser's background image (tiling or set to original size).
Two solid dark blue opaque rectangles are positioned at the top of the page, hiding the light blue-green gradient color when the page first loads.
As you review the elements on the page, it's helpful to reduce the magnification of the page to 25% or less, using the View menu in the Control panel. Remember to first unlock a layer in the Layers panel before selecting an element on the page.
At the top of the page, there’s a text frame with the words Dive In.
To apply motion scroll effects, select an element and then enable the Motion checkbox in the Motion tab of the Scroll Effects panel. Next, either type a value in the key position field or drag the T-handle to the desired location on the page.
Adobe Muse adds these T-handles whenever you select a page element and enable scroll effects, although the T-handle varies slightly depending on which of the four tabs (motion, opacity, Slideshow, or Edge Animate) you use in the Scroll Effects panel.
The Motion tab of the Scroll Effects panel is split into two parts: Initial Motion and Final Motion. Each part has arrow buttons for vertical and horizontal motion, with a speed field for each direction. These fields indicate the speed of motion that the object will move, in relation to the speed that a visitor scrolls the page. The settings in the Initial Motion section control how an element moves, until the key position is reached. The Final Motion settings affect how the element moves after the page scrolls past the key position (see Figure 5).
In the Initial Motion section shown in Figure 6, the right arrow in the horizontal section is set to 1x, meaning the element will move to the right at the same speed (one times the rate) the page scrolls until the key position is reached.
In this case, the key position is set to 0, meaning that as soon as the page begins scrolling, the settings in the Initial Motion are ignored. Settings in the Final Motion immediately take effect, because scrolling causes the page to move past the key position. If you scroll the live site, the Dive In text field does not move to the right. The Final Motion settings (which are set to move up at a rate of .8x), make the text frame move upwards at a rate that is slightly slower (.8x slower) than the scrolling speed.
Notice that the horizontal (right) direction speed field in the Final Motion section is set to 0. This means that the element will not move horizontally once the page scrolls past the key position. When you scroll the live Deep Blue Scroll site, the text frame only moves up.
If you select the arrow image and review the Motion settings in the Scroll Effects panel, you'll see that the arrow is set to move down at a rate of 1.5x (one and a half times) the scrolling speed in the Final Motion section.
Examine how the animated waves are set up using scroll effects. Arranging elements in the Layers panel, adjusting opacity, and applying scroll effects can create interesting motion effects that weave in between each other, conveying the illusion of depth.
There are a total of three rectangles that contain tiling wave shaped graphics: one rectangle moves up and two rectangles move down from the split point. These are layered behind two larger, dark blue rectangles. You may find it easier to see the wave rectangles if you temporarily hide the two larger, dark blue colored rectangles in the Layers panel.
The three wave-filled rectangles are filled with partially transparent PNG images (wave_up2.png and wave2.png in the Assets folder) set to tile horizontally.
All five rectangles are set to display at 100% width by dragging their left and right sides to match both sides of the page. If visitors resize their browser window, all of the rectangles expand to fit, spanning the entire horizontal width of the site.
The rectangles filled with wave graphics are arranged in Layers to set their stacking order. The rectangle arranged in the back is set to 60% opacity in the Control panel (see Figure 6).
Select each of the elements and review the settings in the Motion tab of the Scroll Effects panel.
The two larger solid and the three smaller wave-filled rectangles all have key positions set to 0, so only the Final Motion settings are applied.
The top solid rectangle moves up at a rate of 1x. If you select it, you’ll notice that its T-handle has been clicked and dragged, collapsing its length so that there is no height difference between the top edge of the rectangle and the top of the page. By collapsing the T-handle, you ensure that the gradient browser fill color does not show through. The bottom solid rectangle moves down at a rate of .9x as the page scrolls.
The wave-filled rectangles move in opposite directions. One moves up at a rate of 1x, while the other two rectangles move down at a rate of .9x in the Final Motion settings.
So the upward moving wave element has two different scroll effects applied: the entire container is moving up (via settings in the Scroll Effects panel), while at the same time, the tiled wave image inside the rectangle container is moving upwards and to the left (via the Scroll tab of the Fill menu).
The other two wave elements move downward. The topmost bottom wave moves down at .9 of the speed of scrolling, as set in the Scroll Effects panel. Additionally, in the Scroll tab of the Fill menu, the horizontally tiled graphic is moving up and to the right at the same speed of the scroll.
The wave element set to 60% opacity also moves down based on the Final Motion settings in the Scroll Effects panel, while the settings in the Scroll tab of the Fill menu make the horizontally tiled graphic move up and to the left.
As you can see, there are a total of three areas in the Adobe Muse workspace where you can apply scroll effects: the Browser Fill menu, the Fill menu, and the Scroll Effects panel. By using scroll motion while strategically arranging layers in the Layers panel, setting items to span 100% of the width of the page, and adjusting opacity settings you can create compelling page designs.
Next, examine the diver element. It is a placed PNG image with transparency that has been enabled for motion in the Scroll Effects panel.
The diver stays in the same location while the other page content continues to scroll, as though the diver is pinned in place.
The Motion tab can also be used to make elements remain in place (similar to pinning an object on the page), so that it does not shift along with the rest of the page when scrolled.
This feature is especially useful when creating mobile layouts destined for iOS browsers, because iOS does not support pinning. When you build a Phone or Tablet layout, the pin interface is grayed out because pinning is not supported on mobile devices.
On either side of the diver, there are two identical Slideshow widgets that display columns of bubbles. You can review the series of slideshow images in the Bubbles subfolder of the Assets folder.
Review the other configuration settings:
The Slideshow tab of the Scroll Effects panel has Autoplay enabled. When the page scrolls past the key position, it begins to play, making the bubble images cycle through and loop.
Notice the other option in the Slideshow tab. You can also set a slideshow to switch to the next slide every time the page scrolls a specific number of pixels.
In this example, one of the slideshows is arranged in front of the diver and the other is arranged behind the diver. This gives the illusion of depth, as animated bubbles float up past the diver.
There are many other scroll motion effects added to The Deep Blue Scroll. For example, the compass is a placed OAM file created in Adobe Edge Animate. In Adobe Muse, the Edge Animate tab is similar to the Slideshow tab — you can use scroll effects to advance the frames of animation on the main timeline.
Additionally, you can use the Opacity tab to make elements fade in and out. After enabling the Opacity checkbox and setting a key position for a selected item, you can set the Fade Position 1 and Fade Position 2 values, and then set the percentage of opacity for each position. The jellyfish graphics on the page use a combination of opacity scroll effects with shadow and glow effects to create a phosphorescent look.
If you want more grounding in the basics, try Working with scroll effects in Adobe Muse for an easy-to-follow tutorial.
For a real-world example of scroll effects used in an innovative website, see Designers use Adobe Muse CC to build a map of Manhattan.
Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.