Sélectionner une page

A Handy Guide To Creating & Using The Parallax Effect Within WordPress

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.

We’re going to define what parallax 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.

Tesla Motors

Tesla-Motors-Parallax

In this example, the parallax scrolling effect is used sparingly but to great effect. It is one of many clever design elements used to elevate a mere FAQ page into a compelling story about taking a trip in a Tesla vehicle.

Visit Site

Space Needle

Space-Needle-Parallax

At the Space Needle website you can use parallax scrolling to travel over 605 feet up the needle and learn about fun stuff to do in Seattle along the way.

Visit Site

Game Boy

Happy-25th-Birthday-Game-Boy-Parallax

On this site you can use parallax scrolling to scroll your way through some old school style tetris for Game Boy’s 25th birthday.

Visit Site

Sony

Sony-Be-Moved-Parallax

As part of Sony’s Be Moved campaign they created this website to tell a compelling story with parallax scrolling.

Visit Site

Highway One

Highway-One-Game-Parallax

On the Highway One website you can use parallax scrolling at the intersection of storytelling and game-play.

Visit Site

How to Create a Parallax Effect in WordPress with Code

When it comes to creating a parallax effect in WordPress with code you have a few options. You can add a parallax custom post type to your existing theme–as shown in this tutorial by Andrei of Wevo Studio–or you can create your own theme with pages that use a custom parallax page template of your own design.

In all honesty though, unless you are developing your own theme or simply want parallax development practice, you are probably better off using one of the plugins below or a theme that comes with parallax pages already. The tutorial I’ve linked to above literally does the exact same thing as many of the plugins below. The main difference being that with a plugin the hard work is already done for you.

If you are actually looking for some good development practice with parallax, then you should check out the following tutorials too:

Parallax Effect Plugins for WordPress

If using the code above is not something that you’re able to do, comfortable with, or simply uninterested in, there are several plugin options for WordPress users. I’ve included four different plugins below–both premium and free–that should have you creating parallax posts and pages in no time.

Parallax One Page Builder WordPress Plugin

Parallax-Plugins-Parallax-One-Page-Builder

The only premium plugin on this short list, the Parallax One Page Builder is designed to help anyone build parallax scrolling pages with any theme. It comes with various effects, gallery and portfolio capability, custom SEO tools, and much more.

Price: $22 | More Info & Download

Parallax Scroll

Parallax-Plugins-Parallax-Scroll

The Parallax Scroll plugin uses a parallax scroll custom post type to allow anyone to create posts or pages with parallax elements.

Price: FREE | More Info & Download

Parallax Gravity – Landing Page Builder

Parallax-Plugins-Parallax-Gravity

Parallax Gravity is designed for building landing pages. So while this will not allow you to add parallax elements to your existing post/pages, you can create new landing pages with parallax elements in them.

Price: FREE | More Info & Download

Aesop Story Engine

Parallax-Plugins-Aesop-Story-Engine

With the Aesop Story Engine, parallax is just one of several storytelling modules available for use. Used in conjunction with either an official Aesop theme or any theme running the Aesop compatibility script (which can be found on the plugin page linked below) anyone can include parallax elements in their long-form posts or pages.

Price: FREE | More Info & Download

How to Create a Parallax Effect in WordPress with Divi

If you’re a Divi user, as I’m sure many of you are, then you can include parallax elements on literally any page you choose to create using Divi’s built-in page builder.

Here’s how:

First, make sure that whatever page or post you’re creating is in page builder mode.

WordPress-Parallax-Divi-Pagebuilder-Button

Next, click on the settings button for any background section.

WordPress-Parallax-Divi-Pagebuilder-Background-Settings-Button

You’ll be brought to a screen like this one. If you scroll down you will have the option of enabling parallax. You can choose between CSS or true JavaScript parallax with the simple click of a button.

WordPress-Parallax-Divi-Enable

When your preference is set, simply click save on the settings module, save draft on the page, and then preview. If you’re unfamiliar with what this effect looks like with Divi, check out the divi demo for various examples.

In Conclusion

Parallax, like or not, doesn’t appear to be going away any time soon. As time goes by however, I think seeing it done on a page just for the sake of having it there will certainly fade away. What we’ll see instead are tasteful instances of parallax, used in conjunction with other design techniques, to achieve an elevated user experience.

In today’s post we learned how to add this kind of parallax to our WordPress websites through code, plugins, and via the Divi page builder. If you have anything to add or comment, we’d love to read your thoughts in the comments below.

Article Thumbnail by Bloomua / Shutterstock.com



Source link

Poster le commentaire

Votre adresse e-mail ne sera pas publiée.