Create Cool Parallax Sections Easily!

In this video, we explore how to effortlessly set up parallax sections for your WordPress websites using Motion.page.

Here's the transcript formatted for better readability:

Quick Parallax Tutorial with Motion Page & Oxygen Builder

Introduction:
Today, we're diving into a quick tutorial. This was actually requested by one of our customers. He was curious if we could create Parallax sections using Motion Page. The answer is a resounding yes! Here's a basic example he provided, and I'll guide you through how to replicate this using Oxygen Builder.

Setting Up:

  1. Start by creating a new page named "Parallax". Once done, publish it.
  2. Next, edit the page with Oxygen.
  3. Initially, we'll focus on creating one section, but eventually, we'll have three sections in total.
  4. Set the height of the section to 100 viewport height.
  5. I've sourced some images from Unsplash. For this, I recommend longer, portrait-style images as they work best for our purpose.
  6. When setting images as a background, especially if you have multiple, ensure you assign them to the ID to keep them unique.

Class Creation & Background Settings:

  1. Create a class named "MP-Parallax" and apply it to every section. This class will be controlled in Motion Page to adjust the background position property.
  2. For the background, set the size to "cover" and ensure it doesn't repeat.
  3. Leave the other settings as they are since we'll control them in Motion Page.
  4. On the ID, add an image overlay.
  5. Adjust the layout to horizontal middle center and add white text. For instance, "This is the first section". Add a shadow for better visibility.

Duplicating & Adjusting Sections:

  1. Duplicate the section twice.
  2. Change the background images for each section.
  3. Now, open up Motion Page to adjust the animations.

Motion Page Settings:

  1. Create a new timeline named "Parallax".
  2. Since Parallax works as you scroll, change the trigger to "scroll trigger".
  3. Target the "MP-Parallax" class. You'll notice the first instance of this class gets highlighted.
  4. Adjust the background position on the y-axis. For example, setting a value of 20 makes the image move up slowly.
  5. If you notice the images scrolling too fast or animating simultaneously, adjust the settings. Ensure the "ease" is set to "none" and delay to "zero".
  6. To avoid any weird pauses, adjust the viewport settings so animations start as soon as they're visible.

Finalizing & Testing:

  1. Save the timeline and test the parallax effect on the front end.
  2. The backgrounds should move slower than the actual sections, creating a parallax effect.
  3. Feel free to play around with the values for different effects. For instance, using values like 0 and 100 can give a more pronounced effect.
  4. Lastly, customize the text as per your preference.

Conclusion:
Creating a parallax effect like this is straightforward and doesn't take much time. I hope you found this tutorial helpful. Thanks for watching! As always, please don't forget to give us a like and subscribe. Stay tuned for an exciting tutorial next week where we'll be crafting a page similar to Apple's website. See you next week!

Video transcript

View full
Hide

Today is just going to be a quick tutorial. This was actually requested by one of our customers. He was asking if we could make Parallax sections using Motion Page, and the answer is yes. Here's the example that he provided, something like this. It's pretty basic, and I'm just going to show you quickly how to make this in Motion Page using Oxygen Builder.

So first, what I'm going to do is create a new page, and we'll call this Parallax. Alright, publish, and then we'll edit this with Oxygen. Alright, so what I'm going to do first is create three sections in total, but just to start with, we'll focus on one. Now, what we want is a height of 100 viewport height, and then I've prepared some images over here with Unsplash. I recommend images that are longer, kind of portraits. This is going to work much better for our use case. So I'm just going to copy the image address on this.

Remember, guys, when you put images as a background, if you've got more than one like this, do it on the ID just so it can remain unique. Then what I'm going to do is create a class, and I'm going to apply the class to every section, and then we're going to control the class in Motion Page. What we're going to do in Motion Page is change the background position property. So I will show you that in a second, but first, let me add this class. I'm going to call it MP Parallax like that. On here, I'm going to change the background size to cover, no repeat, and then I'm going to leave these two blank because I want to control these in Motion Page. Now, on the ID, I want to put an image overlay, and then what I'm going to do is change the layout, horizontal middle center, and then I want to add some text here, fix color white, and then let's add some text, "This is the first." I'm also going to add a shadow to this. Alright, something like that.

And then now, what we can do is just duplicate this section two times, and then I'm just going to change the background images here. Alright, so that's how to set up the sections. Now, all we need to do is open up Motion Page, and I'll show you how to do it. Okay, so I'm going to go ahead and create a new timeline here. We'll call this Parallax as well. Open up our new page. Now, Parallax works as you scroll, so obviously, we'll need to change the trigger here to scroll trigger. We want to lock this to the scrollbar, and I'll show you this after, but for now, let's just go ahead and target the class that we set up, which was MP Parallax. Hit enter, so you can see the first instance of this class is highlighting, which is good.

Then what we're going to do on from, we want to change the background position, and on the y-axis, we want to put this to a higher value. So what this is doing is it's starting from the bottom, and we want it to go to the top. So if we put a value here of something like 20, what's going to happen is the image is actually going up really slowly. Now, if I change these values around, you'll see the opposite effect, which we don't want. So 20, 80. Now, you can see the images are just kind of scrolling up way too fast. Now, this image here is because the height is not as big as the height of this one. Because these have the same class, they're all animating at the same time, which we don't want. So what we'll need to do for that is click on this. So now, when each class reaches the start viewport, they're going to animate from the start each. Now, you can see we have a really weird issue going on.

So what I'm going to do, just to make sure that there's no issues, make sure ease is set to none, and as you can see, that's fixed a little bit of one of our problems. The next thing I'm going to do is turn the delay to zero. We don't want any delay on this. Now, the other issue we have is this weird pause going on, and that's because the start viewport has some space here. We want animations to start as soon as it reaches the viewport. So I'm going to change these values so that they span the whole screen. So 100 there, and I'm going to change this to zero percent, and this should work now. So now we have this nice effect going on. Look, just go by. I'm just going to refresh this just in case. Alright, looks pretty good. I'm going to save the timeline, and let's have a look at this on the front.

So I'm going to use the scrollbar here. Nice Parallax effects. Yep, that's perfect. So it's a little bit similar to this one. You can see the backgrounds move up way slower than the actual section itself. And once again here, the background's going up way much slower than the section itself. So that's how I would create a parallax effect like this. Now, obviously, don't forget, you can play around with these values. You can use more extreme numbers like this, 0 and 100. Save timeline, check that on the front. So we have another interesting effect going on there. It's very similar, obviously, the values are just a little bit more extreme, that's all. And then obviously, you'd want to change your text here. You get the idea. Save that.

And there you have it. Like I said, a very quick tutorial. Making a parallax effect like this does not take too much time, and I hope you like it. Thanks for watching, guys. As always, please don't forget to give us a like and subscribe. Next week, we're going to have quite an exciting tutorial coming. If you like what Apple does on their website, then do stick around because we will be making a page similar to the ones on the Apple website. So thanks again, and I will see you next week. Thank you.

[Music]

100 %