As we know, a parallax effect is one where
objects which are closer appear to move faster
relative to objects farther away.
And, by extension of the same logic, objects
which are farther away appear to move more
slowly.
In this project, we have a section containing
several images.
And our goal here is to make the images closer
to us appear to move more quickly as we scroll
through our section.
To do that, we're not going to select the
element or elements we want to move; we'll
instead select the section.
Because we want our section to act as the
trigger.
(We want the images to move as we scroll through
our section.)
So.
Here we are with no interactions applied.
Let's go in and create an animation (based
on the section) while it's scrolling in our
view.
On scroll, we'll play our scroll animation.
Now we can change the animation boundaries
here if we'd like — this is super powerful.
But for now, let's leave it so that the animation
begins when the section starts entering the
viewport, and ends when the element is fully
invisible (once we scroll past the section).
And with that in mind, let's build our animation.
And we can name it Parallax Scroll Effect.
We'll start with this image — and the first
step is to select it.
We'll add a scroll action which affects the
way this moves.
So while the section is at 0% (right as it's
starting to scroll into view) let's have our
image start down a bit.
And when the section is at 100%, let's move
it up.
We can actually flip on Live Preview and see
the effect as we scroll.
The image appears to move at a faster rate,
which gives us that parallax effect because
the image also appears closer to us.
Let's do the reverse on this one in the back.
We'll make sure it's selected, and we'll go
in to add a scroll action here as well.
This time, let's see what happens if we start
by moving the element up.
And we'll continue by adding another scroll
action, so that down at 100%, we can move,
so that the element actually moves down.
And when we test this out?
When we scroll on the page?
It appears that we have three planes or levels
of depth here.
The first level, the image to the left (which
appears closer, and appears to move more quickly);
the second, almost all the other images (which
appear a bit farther back, and appear to move
at a normal rate); and finally, the third
level, the image in the back (which appears
farther back, and appears to move at a much
slower rate).
Let's do another one.
Make our selection.
We want this one to appear closer, but not
as close as the image to the left.
So we'll move it down to start.
And we'll create our second scroll action
at 100%.
And our goal here, of course, is to make sure
it moves up.
Not as dramatically as the image to the left,
but enough.
When we preview?
The parallax effect is now more pronounced,
and we've created what appears like another
level of depth in our animation.
So.
Here we are after adding scroll actions to
more of these elements and tweaking our animation
a bit.
The key here (as with any good parallax scrolling
animation) is to make sure elements in front
appear to move more quickly than elements
behind.
If element movement doesn't adhere to that
principle, animations can often feel a bit
off, or to use a surgical term, "janky."
A cool way to think of it is: in parallax
animation, higher z-index elements (those
on top of others) should appear to move more
quickly than lower z-index elements (those
elements behind other elements).
