As always, the WiredeltaⓇ team tries to bring you the newest and coolest technologies to make your digital presence better and more memorable. Today we will dive into the user interface design trend, the Parallax effect in depth. Several of our users asked how to use the Parallax effect, but to explain this cool effect, we needed to spend a little more time. So lets start by explaining what is this effect in the first place.
What is the Parallax effect?
Parallax scrolling, or the Parallax effect, is the functionality of a webpage where the background content (for ex. text or images) moves at a different speed than the rest of the page’s content while scrolling up and down. In other words, Parallax is when you have an image in the background that follows you when you scroll through content.
How to implement Parallax?
You can implement Parallax on your website in several different ways. If you are a skilled developer and you like coding, you can use CSS or JavaScript. If you are more of a beginner, you don’t need to worry. You can still use good ol’ WordPress.
Parallax in CSS
CSS could be scary for new developers, but it really is not that hard. To implement Parallax using CSS, all you have to do is use a container element. Add the image you want to the container element, set the height of the picture and use the “background-attachment: fixed” function.
The height of the picture can be set in two ways, by pixels or by percentage. If you use percentage, remember to add the “height:” to both the <body> and <html>.
However, parallax may not work on mobile devices, so to make sure that your website is mobile responsive, all you need to do is use media queries and turn off the feature for mobile devices.
Parallax in JavaScript
In order to implement Parallax in JavaScript, you will need a jQuery plugin. jQuery is an exclusive JavaScript library that simplifies many tasks in JavaScript.
The idea of the jQuery plugin started in 2005 when John Resig realized that the behaviour code simply seemed too tedious for him to use every day. As a JavaScript expert, John decided to fix this issue. So in 2006, the first version of the jQuery plugin was launched.
The team behind John and jQuery has been working ever since to upgrade and perfect the tool into the popular library that it is today. The library works on the same motto of “write less, do more” as we do.
Parallax.js
Like we always say, why code more than you need to? Along with jQuery’s development, many frameworks have been created to help developers code easier, faster and better. Sooooo…
Yes! Good news, developers, there is a framework specifically for this wonderful effect and that is the Parallax.js framework!
Parallax.js needs to be implemented in the jQuery library as a plugin. Next step, install the plugin by downloading it and have parallax.min.js included in the document.
Now that we have installed the plugin, there are two ways to use it, via data attributes or manually, via JavaScript.
To add a parallax effect via data attributes, add data-parallax=”scroll” to an element, and specify the image you want to use with data-image-src=”/path/to/image.jpg”.
Parallax effect with JavaScript
If you want to set the parallax effect manually, via JavaScript, select your target element with jQuery and use the following line:
Remember that parallax.js fixes the images at the start of the body and they will sit behind the rest of the page’s content. This means that you need to make sure the layers (or some of the layers) in front are transparent so you can see the parallax effect.
The settings for the image you use to create the parallax effect are passed through data attributes in JavaScript by using “data-” (i.e. data-image-scr, or data-natural-width).
Besides the advantage of making the implementation of the parallax effect so much easier, the parallax.js plugin is compatible with all the major browsers. But remember, the parallax effect is not compatible with mobile devices. To cancel the parallax effect on these devices, you need to make sure the iosFix and androidFix settings are set to “true”.
Parallax effect in WordPress
There are two ways to implement the Parallax effect in WordPress. Developers who have a good understanding of coding can use HTML and CSS in WordPress as well.
Parallax effect with CSS
To implement the parallax effect in WordPress using CSS, you first have to go to Media > Add New and upload the photo you want to use. Copy the image’s URL from the media library.
Next, add the HTML code to your post or page, or even to the theme.
Now you have to edit the CSS for the theme to make sure your image will show properly. Remember to replace the background image with your URL.
After you adjust your CSS settings to fit your website, save and test by going to your website. If it’s not perfect, you can always go back to your CSS code and fix it.
Parallax with plugins
Plugins are fast and easy to use, and you don’t need to be a developer to use them. Plugins help non-developers build and improve their websites, and meet a large variety of needs.
As a slick and elegant design feature, the Parallax effect is one of these needs, so WordPress raises to expectations.
1. Advanced WordPress Backgrounds
Along with images and videos, the Advanced WordPress Backgrounds plugin also allows you to use parallax. Moreover, with the AWB plugin, you can customize the effect to fit your business or your preferences. AWB allows you to:
- Custom speed option;
- Enable / Disable for mobile devices option;
- Scroll effect;
- Opacity effect;
- Scale effect;
- Scroll + Opacity effect;
- Scroll + Scale effect.
2. Parallax Scroll
Parallax Scroll is a plugin created specifically for the effect. To use create the effect using this plugin, all you have to do is create your content in the custom Parallax Scroll post type.
The admin page will provide a shortcode to you that you have to paste in any post or page where you want to use the effect and that’s it!
3. WP FullPage
This is a fun and exciting plugin. WP FullPage it is not created just for parallax, however. But the plugin gives you a different approach to the classic up-and-down scroll. You are still able to use the plugin for a vertical parallax effect, but you can also choose the horizontal effect.
4. Aesop Story Engine
Aesop Story Engine (ASE) understands the importance of good storytelling so they created a tool focused exactly on that, storytelling. ASE built this plugin to help WordPress users create amazing content fast and efficiently while they create their posts.
Among many other features, ASE gives the option of using parallax with an optional floater item. This allows you to use ASE on multiple levels of engagement.
5. WP Parallax content slider
WP Parallax content slider is a plugin created specifically for sliders with a parallax effect. This means that you cannot implement parallax for your website. You can, however, create a better presentation of your services or products, without using just a simple carousel.
Conclusion
The parallax effect is just another proof that your website’s design matters at least as much as your content. Content helps you bring users to your website, trough good SEO, but design keeps them interested. There are many ways in which you could implement this awesome effect on your website, and every website should be custom.
If you want to try the parallax effect on your own website, we can help. Just reach out to us and start a chat. Together we can recreate your business!
