Rotational parallax on mouseover

Lesson info

Use rotational parallax to give objects the appearance of movement in 3D space — all controlled by the position of your mouse.

Lesson info

Related tutorial

Clone this projectDownload project assetsDownload lesson assets

Transcript

Rotational parallax can be achieved in a number of ways — today we're going to build this effect. And it's achieved by setting 3D perspective, creating a parent element, to which we apply a rotation interaction, then finally, we add child elements. Let's start with that 3D perspective (that child perspective).

We're wanting our animation to rotate in 3D space from the perspective of our section. So with our section selected, let's go down and set a child perspective of 1000 pixels.

That's it. Step one done. This is great progress.

For our parent, we'll create a box. Not just any box. A div block box. Or, as they referred to it in ancient Greece, simply a "div block." Now, so we can see what we're doing, let's add some dimensions here. We'll simply set dimensions, and we'll go down and add a background color — this'll give some visibility. (We can remove this background color later — this lets us see what we're doing for now.)

And that's all for the parent — that's all for step two. Step three: let's build our interaction. And this is really straightforward.

Before we do this, let's make one, quick note: by default, browsers will often flatten elements like this which have children, so a great workaround is to apply a really tiny rotation about the x-axis or y-axis — something like .001º. That'll preserve our 3D properties.

We can go over to interactions. Of course we want to create an interaction based on mouse movement in the viewport. That means as our mouse moves around inside the viewport, what we build in this animation will apply. So we have our x-position, and we have our y-position. Our x-position, at 0%, is when the mouse is all the way to the left on the viewport.

So we'll rotate our parent div (at 0% of course) to the left. (We want this div to rotate to our left when the mouse is on the left side of the screen.) Let's create another action (or keyframe) at 100%. As we know, our x-position, at 100%, is all the way to the right on the viewport. That means, for this point, we want to rotate it (rotate our div) to the right.

Okay that's done — we'll do the same now with y-position: 0% is when the mouse is at the top; 100% is when the mouse is at the bottom. So at 0%, we'll rotate upwards — so it's facing the top of the viewport. And at 100%, we'll create one more which we can rotate downwards — so it's facing the bottom of the viewport.

And if we test this out? If we enable live preview? This behaves exactly as we'd expect. (Moving the mouse rotates the parent div. It does this based on our mouse position in the viewport.)

That's the interaction.

Let's add some child elements to the parent element. And the key here is this: the rotational parallax (don't worry we're only previewing the end as a reference — we'll build all this in a moment) — but the key is that the parallax is driven by the interaction we just created, and each child element being positioned at varying points along the z-axis. (Different depths.)

As we know, the z-axis runs perpendicular to the x and y axes — and we can use it (the z-axis) to give the appearance of depth.

So to control how the children are aligned in this div block, we can set our display to flex. That unlocks our justification and alignment options, where we can center the content we'll be placing inside.

And we'll drag in our first piece of content. This can be anything you can dream up. And once we have an element inside, we can see (since it's a child of our div block) that it responds just as our parent object does. But here's where it gets crazy. Let's set the position to absolute. This'll let us stack objects. And then we'll go down to our transform properties and add a transform to move along the z-axis. This gives the appearance that the element has moved towards us. And if we go and preview this to check it out? We've achieved that rotational parallax effect — different objects at different z-positions which are being controlled by one interaction on a parent.

Let's add another element. And we can style this one, too — absolute position, transform it by moving its position along the z-axis — something different this time, of course. And on preview? We're getting an even-better sense of depth.

We can repeat this over and over and over to create some pretty crazy things. It's just different objects at different depths (different positions) — which are all children of the parent. (That parent has our rotational interaction applied.)

You can blur these child elements in your favorite photo editor, or even use the blur filter. This'll create a shallow depth of field effect which can be used on anything.

And that's what we've covered today with regard to rotational parallax.