Create Epic Scrolling Parallax Effects in WordPress Using Motion.page

Hi, guys. Luke here with motion page again. Uh, today I just wanted to make another quick tutorial. It's a really quick one today, but I want to show you how you can achieve a very simple effect like this as you scroll down.

We have some cards, as you can see, and they're kind of just moving independently of each column, and also the background position is moving slightly as well. I just thought this was a pretty cool effect. I saw this on a website last week, and I wanted to turn it into a YouTube tutorial. So let me show you how you can achieve this right now.

Okay, so as usual, I'm going to be using Oxygen Builder for this. I'm just going to create a new page. I'm going to call this 'Card Animations,' something like that, and then we'll edit with Oxygen.

First, I want to create a section just to create a buffer zone. I'm going to make this 100 viewport height like that, give it a background, something dark. I'll duplicate this, and then in the middle, we'll focus on the main part.

Okay, so first what I want is kind of like a heading. So I'll just do this: 'Our Project.' I want to center everything in here. Next, what I want is to create my columns. So for this, I'm going to use five columns using grid. I'm just going to apply a utility class here. I also want some space in between these, so I'm just going to add some margin to this, and I also want this to span the full width of the page. So what I'll need to do is go back to the section, and in size and spacing, just set this to full width.

Now, in here, we'll put five divs, which will be our columns, and I want to put some gap in between those. So I'm just going to use 'Gap S.' Let's just add our first one here. I'm just going to rename my elements here so I know what's happening, and then in one column, I want to have two cards. So I'm also going to put some gap on the column itself, and then I'll create another div; this is going to be our card. I'm going to add a class to this and I'm going to say 'project CAD.'

The project card wants to be 100% wide; the height I'm just going to do for now is 350 pixels, something like this. I want a border radius of around 7 pixels, maybe 10. I'm going to add a utility class here, 'Shadow.' I'm just going to duplicate that one; just make sure we've got that space there. Perfect. So what I'm going to do now is on the first card, I'm just going to add a background image. On the ID, now I've already uploaded some pictures here from Unsplash. I'm just going to use these. This is okay.

What I want to do on the class 'project card' is control the way the background image is showing. So I'm going to set it to 'Auto, no repeat, and then top I'm going to do zero zero percent like that. So this is going to apply to all of the cards, and the only thing that's unique on the ID is the image itself.

Then in Motion Page, we can control these numbers depending on how we scroll; we can change this top to give it a kind of a parallax effect. So I'm just going to finish creating these; I'm going to speed up the video, but all I'm going to do is just add more of these columns and add cards to each one.

Okay, so as you can see, we're having some small issues, which is that some of these pictures are really zoomed in. So I think what I'm going to do instead is, on the 'project card' class, instead of 'Auto,' I want to change it to 'manual,' and then I just want to control the height here. So our card, if you remember, is 350 pixels; we'll just change the height to 450 pixels. That gives us 100 pixels leeway, and then the width, I'm just going to set to, well, I'm just going to leave that blank, actually.

So now, you can see there's much more detail in the images here. So I'm going to save this. Before we go to Motion Page, though, I do need to do one more thing. So as we scroll up and down, we want the odd columns and then the even columns to kind of behave separately. So we'll want some of the columns to move up, and then some of the columns to move down. So I'm going to add a class to this one called 'MP scroll up.' I'm going to add this to the odd ones, so this one and this one as well. If you scroll up, and also this one, 'roll up,' and then this one, the even ones, we're going to do 'MP scroll down,' and this one as well. And that should be it. We can now head over to Motion Page and start animating.

Okay, so I'm going to create a new timeline here. I'm going to call this one 'project cards.' Let's open up our newly created page. [Current Animations] So the first thing I want to do is make sure this is on 'scroll trigger.' We want to lock this to our scroll bar. The delay, I think, half a second will look nice. I don't want to change any of these values. I think the 'start' and 'end points' are fine as they are. And I want to come down here, and I want to add our first selector, which was 'MP scroll up.'

So hover over that; make sure that the first instance of this class is highlighted, which it is. And then we want to control the 'translate Y-axis.' So as we scroll down, we want it to move up. So we want the starting position to be further down, so let's say, let's use pixels for this, and let's say 50 pixels. So you can see they've moved down, and we're on the start point here from, so as we go down, it's going to move to the default value, which is zero. That was a little difficult to see, but you can see that the gap between these two has closed a little bit; you can see it's moving up here. Now, to make this more extreme, you can see it at 500 pixels. You can see that's clearly moving up as we go down.

But I'm going to leave this at around maybe 100. In fact, no, 50, because what we're going to do is apply another 50 pixels to these ones, which is going to exaggerate it even more. So let's create, well, actually, let's duplicate this one, and then instead of using this selector, let's do 'MP scroll down.' And now we can delete this one. Alright, so on this one, we want to do a minus value, minus 50. So now, as you can see, if I scroll up here, sorry, my scroll wheel is a little bit broken, we can see we have a really nice effect going on. Now, because on both of these nodes on the 'two,' we didn't put any value, which means they're going to line up as per Oxygen settings here, so they're going to become straight. Now, if you want this to carry on as you go down, you could just add a value in the 'two.'

So, for example, from -50 to a positive 50 pixels, and then we'll do the opposite here, so 'from' is 50 to -50 pixels. Then, as I scroll down, it's going to continue past Oxygen's default values like so. It's a pretty cool effect. And then the next thing I wanted to do was I want to change the background position of the image ever so slightly. So, in Oxygen, as you can see, on 'Project card' class, background, the top is currently zero percent. So, let's play around with that. So, let's make a new node; we'll target this class, which is 'Project card,' 'project CAD.' You can see the first instance of that class is highlighted, and now what we can do, we could choose either 'from' or 'to.' So, the default value is zero.

So, if we keep this at zero, and then in Motion Page, on the 'two,' we put here 100 percent, you'll see that as we scroll down, the images, the background images, are actually changing the position. Now, in some cards, it's a little difficult to see; this one, for example, is very noticeable. And that's just because the card itself is also moving up. But because this one looks like it's moving up more slowly, the background image also looks like it's moving. Mostly, it is moving.

Now, I can assure you, you can see the mountains here. As I scroll down, they're going off the screen, but because it's compared to the ones that are moving up, it just looks like it's more slow. So, let me save this, and we'll check it on the front. So, I'm going to scroll down here. Pretty cool. But this starts at the top. If you scroll down, it's going to go to the bottom. These continue moving up.

Yeah, pretty cool effect, I think, and you could even take this further; you could add a hover effect to this, and as you hover over a card, you could show a title and things like that. But I just wanted to show you this really quick tutorial on how you could achieve this. It's pretty simple, not too difficult. So, there you have it, guys, just another very simple tutorial today.

We will be back with more videos next Monday. If you liked this video, please give it a thumbs up, and please do consider subscribing; it would really help our channel. I will see you again next Monday. Thank you.