Parallax effects add action and the illusion of depth by taking different visual elements and moving them at different speeds in a website design. Some may move faster, others may move slow, while a few may stand still. Parallax can be used to add some variety, or have more practical applications by showing someone something important. In this post, we'll go over some examples to help you get inspired. On top of that, we'll show you how to use these concepts to build something beautiful for the web.
One of Louie Sellers' many talents, as a forward thinking UX designer, is his eye for interactions. Here in his online portfolio, he puts in a number of cool, attention grabbing visuals. First, there's the pen that uncaps and comes back together as you make your way from the top to the bottom. Then there are parallax effects on each featured project. Hovering over a project fills out the outline with details and shifts the image, giving it a sense of three dimensionality. When foreground images move against a solid background color it makes them more prominent than when left static.
Landing on Alex Dram’s UX/UI portfolio, you're greeted with a minimalist array of purple triangles and a few words about who Alex is as a designer. But with just a tiny movement down the screen, these shapes pull into an arrow-like configuration, headed straight into the planetary-like landscape that unfolds before it. Alex’s use of parallax scrolling brings someone along the journey that is the galaxy of his work. This three-dimensional sleight of hand happens through parallax, while the visual move at different speeds. We love seeing parallax used for artful purposes, and this does so much in giving this website a unique spacey atmosphere.