isotropic-2022
Share
Blog
Search
Menu

Parallax Scroll Animation On Oxygen Builder

By James LePage
 on July 28, 2022

Parallax Scroll Animation On Oxygen Builder

By James LePage
 on July 28, 2022

In this tutorial, we're going to create a unique, multi-layer parallax scene in Oxygen Builder. It's something that will wow clients and website visitors alike, and it's not too tough to implement.

ezgif-com-gif-maker-2
Here's what we're making.

First, we need to actually create the image assets. There is several ways to do this, and however you choose to generate this scene, be sure that there are several full width sections that you can export. Each section should represent a specific depth on the image. For example, there might be a foreground of trees, then a hill, then another further hill, and finally a sun.

image-20-11

For the sake of this tutorial, I decided to use a pre-existing sunset scene which I sourced from the Figma community. However, you can build your own in Figma, or use another program like Photoshop.

We published an article on making a similar parallax scroll animation on Elementor several years ago, and outlined a Photoshop technique where you can take a real image and easily separate and export it for this effect. Read it here:

I would suggest using Figma because it's free, easy, and also allows for a quick exports of groups and layers.

Here's a demo where we make a hill component in a matter of seconds using the pen tool.

isotropic-2022-07-27-at-22-08-29

Combine several of these together, create a group, and easily export, as we'll discuss now.

isotropic-2022-07-27-at-22-03-18
A group of hills that fall in the center of the screen. On top, we'll layer trees, and in the back, we'll place more hills and the sun.

Once you've created your scene with several groups and varying depths of the image, export each group individually. In Figma this is very easy. Simply right click the group, select copy/paste as, and then copy as a PNG.

I do this for each group of elements.

isotropic-2022-07-27-at-22-03-36

I then pasted these PNGs directly into a Gutenberg editor, which automatically uploaded it to the media library.

isotropic-2022-07-27-at-22-16-23
The images in the editor.

Additionally, I installed an image optimization plugin (ShortPixel), which automatically resized and minimized the images so they would load quickly on the front end. This is important if you're going to copy and paste the PNGs directly from figure as it does no optimization on its own - the file sizes are massive.

For the background, I filled the scene with a linear gradient. Figma has a great feature where we can export CSS. Simply right click, copy the css, and only pull out the background of the main frame.

isotropic-2022-07-27-at-22-04-15

Here's what we end up with.

background: linear-gradient(181.12deg, #6D4869 -4.47%, #906074 5.09%, #D58480 18.15%, #ECA58B 34.03%, #F8C995 69.69%);

Now, we make a section that will contain all the layers of our parallax scene. This section has no padding and is set to full width to make the section immersive.

I can then take that linear-gradient background that we exported, and add it to our section's custom CSS.

isotropic-2022-07-27-at-22-02-11

Now, set the section to have position:relative, and no padding. Make it full width and height:100vh, and make overflow hidden, so the scene is contained.

There are two main ways that you can place each layer into the scene: as background images or <img> elements.

I use divs and background images as it's quicker. Our section contains 1 div for each group of items. The div is absolutely positioned with the top, bottom, left, and right being set to 0. That makes it fill the entirety of the section, while allowing it to be moved via translate for our parallax effect.

isotropic-2022-07-27-at-22-37-16

The foreground, background, and everything in between is added to the scene by using the CSS background image.

  • background-position is typically set to 100% which pushes everything down the scene, aligning it to the bottom. If needed, we can easily change the positioning using this property.
  • the background image is set to contain, which means it will be full width within its div.
  • Repeat is set to none
  • Also, add a class like .plax_hill-1 to make it easier to identify when applying the respective effect
isotropic-2022-07-27-at-22-35-42

This is done for each group that we exported, and they are positioned to layer on top of each other by using z-index.

isotropic-2022-07-27-at-22-35-13

We can still be reasonably responsive by changing the background image on different breakpoints to accommodate the screen's change from landscape to portrait orientation (I don't do this in this tutorial, but if this effect were to go production, their would essentially be a different scene for each breakpoint as we would replace each section to take up more real estate as the aspect ratio became longer).

*With the image method, use SRCSET.

oxygen-builder-logo

Oxygen Builder Course - Coming Soon!

The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.

For the sun image, I had to position the top of the background to 50%, which placed it in the center of the div as opposed to pushing it all the way to aligning to the bottom:

isotropic-2022-07-27-at-22-25-38

Now, the entire scene that we created on Figma, exported as PNGs, uploaded to WordPress, and built on Oxygen is complete. It looks almost identical to our design, and is responsive to changes in the screen size. There's no parallax yet, which we will now go ahead and add.

We can use whatever parallax library we want - they all do the same thing. For this tutorial I'm using a newer one called lax.js.

However, check out Rellax.js and Paroller.js, both of which have tutorials published specifically for Oxygen Builder on this blog.

For Rellax:

For Paroller:

Lax can do parallax, but it can also do a ton of other things, making it an incredibly powerful interaction animation library. I wanted to highlight it here and give a basic example to show you what it can do.

68747470733a2f2f692e696d6775722e636f6d2f584e7676414f762e676966
It can get pretty crazy, as seen in this over the top demo.

Essentially, you have a driver, and then you have the effect. The effect is applied based on the driver. In this example, our driver is the vertical scroll, and the position of it. The effects can be anything CSS has to offer. For parallax, we will use transformY. However, we can also change the opacity, scale, colors, and more!

Read more about lax.js here: https://github.com/alexfoxy/lax.js

First, we include by adding the script from a CDN in our wp_head. I used WPCodeBox for this:

isotropic-2022-07-27-at-23-15-23

Then in a JS file added to the footer, we initialize the effect, add a driver that looks at the scroll position of the screen, and then add to various effects to each elements. For all sections other than the sun, we used to translate why to manipulate the position of the div based on the vertical scroll position.

For the sun, we still use the vertical scroll position as the trigger/driver, but instead of manipulating the position, we changed the scale on scroll.

window.onload = function () { lax.init(); lax.addDriver( "scrollY", function () { return document.documentElement.scrollTop; }, { frameStep: 1 } ); lax.addElements(".plax_trees", { scrollY: { translateY: [ ["elInY*2", "elOutY"], [0, 100], ], }, }); lax.addElements(".plax_hills-1", { scrollY: { translateY: [ ["elInY*2", "elOutY"], [0, 200], ], }, }); lax.addElements(".plax_hills-2", { scrollY: { translateY: [ ["elInY*2", "elOutY"], [0, 300], ], }, }); lax.addElements(".plax_hills-3", { scrollY: { translateY: [ ["elInY*2", "elOutY"], [0, 400], ], }, }); lax.addElements(".plax_hills-4", { scrollY: { translateY: [ ["elInY*2", "elOutY"], [0, 500], ], }, }); lax.addElements(".plax_hills-5", { scrollY: { translateY: [ ["elInY*2", "elOutY"], [0, 600], ], }, }); lax.addElements(".plax_sun", { scrollY: { scale: [ [100, "screenHeight"], [1, 1.5], ], }, }); };

Based on the sections overall positioning after applying the effect, I had to go back and change the background positioning of the elements to make sure everything looked right. You could also try and offset using margins or transformations. As long as everything is relative to the same scale, in this case the screen height, it should remain responsive.

And finally, we get to the end result of a layered parallax seen that changes when you scroll. It's really unique, and you can create many different seems like this that will wow clients and visitors alike.

oxygen-builder-logo

Oxygen Builder Course - Coming Soon!

The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.

ezgif-com-gif-maker-2
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram