Parallax scrolling is a process in computer graphics where background
images move past the camera slower than foreground images, making an illusion.
Parallax is made on optical illusion. Since the human eye views objects
that are close to us as large than things farther away, we see distant objects
as if they were in motion slowly. The illusion has been adopted into parallax
across several mediums, parenting a realistic effect. Its first use was in a
mainly done animation, leading back to as early as Disney’s first original snow
white and the seven dwarfs, and games such as Super Mario, and Pac-Man.
With advancements in CSS and HTML, parallax effects, later on, evolved
into the universe of web design.
Here are THREE
top parallax scrolling examples built with Wix, chosen for your web design
inspiration.
01. Nolan Omura
Nolan Omura is a Hawaii-based
photographer and cinematographer/videographer focusing on underwater
photography. His undeveloped take on the parallax scrolling effect adds depth
and motion to his already captivating homepage design.
By dividing it into full-width strips, site visitors are met with
interesting aquatic shots each they scroll down further. The strips float
smoothly above one another, using a mirage of both parallax and revealing
scrolling effects.
02. Ivy Chen
Designer and illustrator Ivy Chen's process of parallax makes for an
excellent web portfolio, in which her works slowly show itself as if by
scrolling with magic.
Ivy’s use of the parallax scrolling effect is not only exhilarating but
also simplifies and explains the page’s content. As a multidisciplinary designer,
she operates at the intersection of illustration and graphic design. The two
fields are integrated effortlessly, with her fashion illustrations slowly
changing into real-life garments as we scroll.
03. Barco Sorriso
Digital illustrations and a clear color palette lend a bright,
cheerful, welcoming tone to this non-profit web page/website. The top fold
depicts a boat in the ocean, fitting for an organization whose name means “The
Boat Called Smile” in Portuguese. As we
move down these multilingual web pages, however, the ocean view of the first
fold is slowly obscured behind the greenery of the second. This smooth
transition, achieved by the use of parallax, brings to mind the layers and depth of
animated videos or movies.
Post a Comment