If you are ready to join the movement and add the effect to your WordPress site, stay tuned.
What Is Parallax?
For those who are not familiar with the term, the dictionary defines the word “parallax” as “the effect whereby the position or direction of an object appears to differ when viewed from different positions.” In the website design world parallax is a technique where background images move at a different speed, usually slower than the foreground images. The purpose is to create an illusion of depth (faux 3D effect) in a 2D environment. The application of parallax has been around from the 1980s in the gaming world, but web designers just began to incorporate the effect widely in 2011 using HTML5 and CSS3.
First Path: WordPress Themes
If you are a WordPress user, the easiest way to have the parallax effect on your site is to use a WordPress theme with the effect built in. Switch the theme and you are done. There are tons of parallax-ready WP themes out there, both free and paid. A quick search on Google and in the WordPress theme repository will give you more options that you can ever handle. If you want to test some of the themes, here are a few examples of them fresh from the repository. Since it’s impossible to test and compare all the available parallax-ready themes and show you only the best, these were chosen solely based on the subjectivity of my personal visual taste. 1. Parallax Frame
2. Marvy
3. SimpleShift
4. Eleganto
5. Integral
6. Zeal
7. Juniper
- And don’t forget the latest official theme from WordPress, Twenty Seventeen, also supports a parallax header.
These themes usually have one or a few specific placeholders for the parallax effect, and all you need to do is upload the background image to those locations. But this simplicity is also a disadvantage because you have little room to improvise. Every theme is different, but you can usually customize the background parallax image via the “Appearance -> Customize” menu and choose the specific menu according to the theme settings.
Second Path: WordPress Plugins
If you want to apply the effect to the areas of your choice, you need to use plugins. Although the number is not as big as with the themes, there are still many WordPress parallax plugins that you can try. Here are a few of them from the plugin repository: Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider, and Aesop Story Engine. Most of these plugins will allow you to create parallax elements and insert them into posts, pages, or any other supported areas using shortcodes. There are also some which create the elements directly in the place where you want the parallax to appear. In Parallax Scroll, for example, you can create a new parallax similar to creating a new post. The editing interface also looks similar. To add the parallax background image, use the “Set featured image” option. Title and post content are optional.
There are many options that you can tinker with below the content box, but they are also optional.
After hitting the “Publish” button, you will get a shortcode. Insert this shortcode into any supported place (posts, pages, widgets, etc.), and you will have the parallax effect.
Note that even if you can adjust many things in the options, the final result of the parallax will depend heavily on the themes that you use. If the theme supports full width, then the parallax element can appear in its full-width glory. If not, you can accept what life has given you with open arms, or you could try to hack your way into your preferred appearance using CSS and JavaScript. A little trick to add to your arsenal: no one said you couldn’t combine the theme and the plugin. Using more than one plugin is also legal. You could, for example, use Twenty Seventeen for your theme and install Aesop Story Engine plus Parallax Scroll as the extra spicing to your web recipe. Now you can go on a parallax journey and wow your visitors along the way.
