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.

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.

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.

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.

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

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.

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

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.

Here's what we end up with.

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.

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.

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

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

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.

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:

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.

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.

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.

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.

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.