Adding Parallax Effects To Oxygen (Foreground And Background)

Published: 8 months ago

In this post, we're going to discuss how to add parallax effects to the Oxygen Builder using an incredibly lightweight JavaScript library called Paroller. This is the companion blog post to the video tutorial, so we definitely recommend taking a look at that before trying to understand this post.

The video makes it much easier to learn how to incorporate parallax effects into Oxygen Builder.

This library is only a couple dozen lines of jQuery code, and can easily be incorporated on an Oxygen Builder website in under 5 minutes and four steps. It also applies parallax effects to both foreground elements and background images. You can see examples of both in the video above.

Install Paroller

Let's talk about how to install and incorporate this parallax effect on the Oxygen Builder website. First, you need to install this jQuery plugin on your website. This can be done in a couple of ways. Perhaps the easiest method is by simply copying the script tag from this CDN JS page, and pasting it into a code block.

In the video example, we used the Advanced Scripts plug in to include a CDN delivered version of the Paroller.JS in the WP footer.

You can also create your own custom plugin enque the script, or even just paste the raw code directly into the JavaScript element on a code block.

Ensure that this library is present on all of the pages that you want to incorporate your parallax effects on. That's the main reason why we used advanced scripts, as it is inserted directly into the WordPress footer. If you are using a code block, simply add this code block to a template that is applied globally, like your header or footer.

Initialize The jQuery

Once Paroller.JS is installed on your Oxygen Builder website, you need to initialize it by pasting the following code into a code block:

jQuery('.plax').paroller();

You can change the custom class to be whatever you want, though we keep it as .plax to make things simple.

Specify Where You Want The Parallax

Next, all you need to do is specify the element that you want the parallax effect to be present on. If it is going to be a background image parallax effect, add the .plax class to the overarching section, div, or columns.

If it is a foreground element, add the .plax class to the headline, text, image, or div. If you don't understand the difference between a foreground or background element, watch the video included above which will give you a good visual description of both.

Add The Data Attributes

After including the class, specify how you want the effect to work. This is done by using data attributes, which can be added from the advanced settings tab, and scrolling all the way down to the attribute panel.

graphical user interface, application

First, specify the factor, which is the speed of the parallax effect. This is mandatory regardless of the direction or type of effect. Then, specify the type of effect, whether it applies to the foreground or background. Finally, specify the direction of the effect, horizontal or vertical. If you want to change the way the effect moves horizontally or vertically, simply make the factor negative or positive.

Here's a screenshot of those various data attributes, and how they work.

If you are confused, we definitely recommend watching that video.

Save your Oxygen Builder page, and load it on the front end. Now, if you properly installed, initialized, specified, and applied the data attributes, your parallax effect should be visible. Again, this can apply to foreground elements, background elements, move vertically or horizontally, and be fast or slow.

Read the documentation, and watch the video for more information on applying this parallax effect to an Oxygen Builder background image or foreground element.

Conclusion

If you have any questions, feel free to leave them in the comments section below. This lightweight library barely has any impact on the performance of your website, is really easy to install, and easy to understand, even if you don't know anything related to JavaScript or jQuery. Simply copy and paste the code elements included above, and you should be good to go.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
deme
deme
6 months ago

Great article

The Only thing I would suggest is adding a scroll trigger, because if your element is way down the page, it will trigger too early.

Uditha Wishvajith
Uditha Wishvajith
1 month ago

https://nannalagerman.com/
I want to create my site name like this. This site has a nice and beautiful parallax effect. But I cannot do it like this. can you help me?

Last edited 1 month ago by Uditha Wishvajith
IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram