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.
