Parallax scrolling 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.
Utilizing parallax is a design technique that 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.
However, note that too much movement within parallax effects can cause harm for those with vestibular disorders. The illusion of movement and depth can cause dizziness or disorientation. If you do use these websites as inspiration for your own, remember to follow some of these guidelines for accessible parallax effect design:
Parallax scrolling 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.
Utilizing parallax is a design technique that 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.
— Keep the number of parallax effects to a minimum
— Constraint movement effects within a small area of the screen
— Include options for users to turn off parallax effects
— Don't let your effects distract users from important information
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.
I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.
Landing on Alex Dram’s UX/UI portfolio homepage, 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.
