A Handy Guide To Creating & Using The Parallax Effect Within WordPress
In today’s post we are going to take a detailed look at one of web design’s (and therefore WordPress theme design’s) biggest trends of the last several years parallax Effect.
We’re going to define what parallax Effect is in theory, what it is within web design, and why someone might want to use it; accompanied by some great examples implemented by talented designers/developers.
We’ll then go over several different ways anyone can implement the parallax scrolling effect on their WordPress website either by using code, plugins, or Elegant Theme’s own Divi page builder.
What is Parallax?
“Parallax” is the word used to describe the difference in the apparent position of an object when viewed from two different vantage points. A good example of this, taken from Wikipedia, is the apparent position of a speedometer needle in a car.
When viewed from directly in front, the speed may show exactly 60; but when viewed from the passenger seat the needle may appear to show a slightly different speed, due to the angle of viewing.
What is a Parallax Scrolling Effect?
In web design, parallax (as described above) is really just a “special effect”. An optical illusion achieved by animating multiple layers of background and foreground images at different speeds to give the impression of depth. The resulting variations in a user’s point of view as they scroll past these images is what we call “the parallax scrolling effect”.
Why Use Parallax in Web Design?
To date, parallax has been widely considered a mere web design trend. Something aesthetically pleasing, but ultimately unnecessary. Many, particularly among the design community, have expressed frustration at parallax’s popularity and longevity. They are eagerly awaiting the day when the general public (i.e. clients and customers) ceases to be enamored with it and it quietly fades away into internet past.
Personally, I’m still a bit intrigued with parallax. As with most things, I think there is a middle ground to be found. I’m not a fan of extreme and/or pointless parallax for its own sake, but at the same time I can’t help but be impressed by and somehow more deeply immersed in content that “uses parallax well”. Something I’m still unsure how to clearly define, but nevertheless “know it when I see it”. Another phrase that tends to upset creative types. Myself included.
All of that said though, I have observed a general rule of sorts that applies to creative technology and trends which may explain (in part) why parallax has the staying power it does. It’s something I explored rather deeply in an earlier post here on the elegant themes blog.
That general rule is this:
Any novel form of communication is at first used for its own sake, because it’s different and interesting. But over time the novelty fades and, if long-term wide-spread adoption is the goal, it must find a utilitarian niche to fill; something useful it does better than other alternatives.
Is there such an instance in which the parallax scrolling effect fills a utilitarian role in web design and/or content creation better than all of the other alternatives? I think so. In fact, there might be several. The first and most obvious example that comes to my mind, is any instance in which the parallax scrolling effect itself helps to illuminate the information being shared.
The first two examples in the section below, I think, prove this point quite well. In each instance parallax is used to varying degrees (with other design techniques) to achieve a more immersive experience that communicates facts/data in a delightful way. Sort of like an interactive display at a science museum which uses a fun activity to cement the lesson in a visitor’s mind.
The first two websites in the section below are prime examples of this use case in action.
Great Examples of the Parallax Effect in Action
There are countless examples of parallax in web design that could potentially be show in this section. I chose the examples I did because, to me, they represent cases in which the use of the parallax effect actually enhance the over-all experience and help to either tell a story or explain facts in a more impactful way.