Dean Dapkus incorporates subtle movement into his website designs. See how he adds depth and visual interest with parallax animation using Adobe XD.

Dean Dapkus is a Creative Director on the Adobe Studio team. He enjoys digital and traditional art and is happiest when he can combine the two in new ways.

您需要的項目

This sample file has Adobe Stock images you can use to practice what you learn in this tutorial. If you want to use the sample file beyond this tutorial, you can purchase a license on Adobe Stock. Check out the ReadMe file in the folder for the terms that apply to your use of this sample file.

Double down

Once Dapkus completed the initial web page design, he prepped it to add a parallax animation — the effect of moving elements at different speeds and directions. He duplicated the artboard by clicking the artboard name and pressing Control+D (Windows) or Command+D (macOS) on his keyboard. Then he double-clicked the new artboard name and renamed it. Duplicating an artboard keeps the layer names the same on each artboard, which is necessary when animating in XD.

Two user experience design artboards show web design for furniture site, artboards are named Parallax Start and Parallax End.

Move into position

Dapkus moved the objects on the first artboard into their starting positions. He opened the Layers panel and selected the End_chairs layer (the image of the three chairs). Then, he held Shift and dragged the image to the bottom of the artboard until the top edge snapped into place at the bottom. Holding Shift while dragging allowed Dapkus to move objects in a straight line.

Adobe XD panel show two chair image layers, one with 4 chairs is on main artboard, one with 3 chairs is below the artboard.

Close the window

Still on the first artboard, Dapkus expanded the Exclusion layer and its sublayers. He clicked on the Window layer inside the Repeat Grid and pulled down on the top-middle handle of the rectangle to resize it to a height of 1 pixel. This positioned the resized rectangles at the bottom of the repeat grid. He then held Shift and dragged to constrain the selection vertically, so he could move the shortened rectangle about 200 pixels below the artboard. Notice in the Layers panel that the object is still part of the Start artboard because it is part of a layer group that is still on the artboard.

Layers panel shows Window layer shortened to 1 pixel and moved below artboard, the image with 4 chairs has blur effect.

Reveal the mystery

To blur the background as the new image animated in, Dapkus clicked the Blur rectangle inside the same Exclusion group and set the Opacity to 0% in the Property Inspector.

Image with 4 chairs shows on the artboard, the Layers panel shows the Blur layer is selected and Opacity is set to 0%.

Crawl the text

To finish prepping the first artboard, Dapkus moved the menu options so that the type would move up as it animated into view. He clicked inside the Navigation layer group to find the Categories group. He selected it and held Shift as he dragged it below the word Modern in the header.

The menu options for the web design are located over the page title and the layer is selected in the Layers panel.

Move the furniture

Dapkus then moved on to the End artboard. He selected the Start_Chairs layer, the image with the 4 chairs, and held Shift as he dragged it above the artboard. He held Shift again as he dragged the top-middle handle down to resize it from the center to 1920 pixels and lowered the Opacity to 20%.

The image with 4 chairs is above the artboard and has been resized to a width of 1920 pixels, the opacity lowered to 20%.

Fade into view

Still on the End artboard, Dapkus selected the Black Background layer and reduced the Opacity to 0%. The final effect results in a transition that appears to grow lighter as it animates to the next artboard.

The black background layer is selected and the opacity is set to 0, 3 chairs show in separate square cutouts.

Preview before presenting

When Dapkus was ready to preview the parallax animation, he clicked Prototype at the top of the screen. Then he selected the Start artboard and dragged a wire to the End artboard. In the Property Inspector, he set the Trigger to Keys and Gamepad and pressed the down arrow in the Key field. He set the Action to Auto-Animate and defined the rest of the motion settings. When presenting the prototype, Dapkus will initiate the animation by hitting the down arrow with one hand and simulating a swipe gesture with the other.

In Prototype mode, a blue wire connects the Start artboard to the End, Trigger set to Keys & Gamepad, key set to down arrow.

Design meaningful movement

Add depth to your browsing experience by adding parallax animations to your web designs.

Final website design shows on laptop screen on a desk, the two chair images are in mid-transition to simulate parallax.

Note: Project files included with this tutorial are for practice purposes only.

04/07/2020

Artist: Dean Dapkus

Adobe Stock contributors: Ramil, Vadim Andrushchenko, Mihalis A., poligonchik, Monster Ztudio

 

此頁面對您有幫助嗎?