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).
