The Parallax Effect is an optical illusion that can give a website the appearance of 3D depth. Learn how to design a parallax website with React Spring in this 5 minute tutorial. https://fireship.io/pro

#webdev #js #learntocode

🔗 Resources

Source code https://github.com/fireship-io/skydiving-cat-parallax
React Spring Parallax https://react-spring.io/
Demo by isladjan https://codepen.io/isladjan/pen/abdyPBw
The boat Demo https://www.sbs.com.au/theboat/

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- How parallax works
- Examples of parallax websites
- Scroll parallax implementation
- Webdev tips and tricks
2024-02-04T13:38:19.613Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
85ac8d25-23ac-4d3a-bc23-02a78f8b89d0
48a94dfd6877ded6ee867f135dbbb47166b8e74d406aa0aafe757a4464dcf11e
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
The parallax effect.
It's one of the oldest and coolest tricks in the design playbook.
It works by making different layers of content or backgrounds move at different speeds when the web page is scrolled, creating the optical illusion of three-dimensional depth.
It's used extensively on Apple product pages like the new iPhone landing stage and can be used in subtle ways like the Firewatch game, where it feels like you're descending behind a mountain before reaching the main content.
Or one of the most mind blowing examples is the boat, which contains 6 chapters of nonstop parallax.
Looks awesome.
So how do I implement it on my website?
Over the next few minutes, You will build this home page of a cat parachuting from the moon down to the ground using an awesome library called React Spring.
Along the way, you'll learn how to quickly transform a boring layout into something amazing.
At the end of the video, we will also look at some more advanced possibilities and and drawbacks of the parallax technique.
If you're new here, like and subscribe, and upgrade to FireShip Pro to get more tutorials like this.
Let's first make sure we understand how the parallax effect works.
We have a background image, 2 images actually, of the moon and a landscape, but we also have text and images in the foreground that scroll at different speeds.
On top of that, you'll notice that the text animates in with a springy animation.
The cat starts at the bottom and then very slowly scrolls up to the top.
This simulates how perspective and change the relative speed of objects as the viewpoint moves, making the website feel much more alive.
To get started, create a React app with your favorite tool.
I'm using Vite.
From there, install the React Spring Parallax package.
If you're not familiar, React Spring is an awesome tool that can easily add life to your components with spring animations, which itself is a technique that relies on physics instead of durations and curves for defining animations.
The library provides 2 components, the first of which is parallax.
You can think of a parallax scene as multiple pages.
That gives us a context to start animating.
To animate the children, we use the parallax layer component.
By default, you can think of each layer as a page that will take up the entire screen.
To see it in action, let's go ahead and add 2 different layers.
Sis.
You can add whatever UI you want inside of them.
Using the default settings, you'll notice that they're stacked on top of each other.
In this example, we have 4 pages, and by default, each layer will start on the 1st page.
We can change that by updating the offset to 1 on our second layer.
That will tell it to start at the top of the second page.
Okay.
But now it doesn't really do anything interesting.
We just have 2 headings like a normal website.
We can start making things look cool by changing the speed of one of the layers.
This will tell it to scroll at a different speed than everything else.
The difference is subtle, but you'll notice the second layer of text moves at a different speed.
And as you move, it will also use a spring animation, making it appear more lifelike.
But to really take advantage of Parallax, you'll want to have background images.
Speeds.
The parallax layer component can also take a style, inside of which we might define a background image.
Now generally speaking, your background images will move slower than everything else, and you may want to have them span multiple pages.
The factor prop allows us to do that.
By default, every layer will have a factor of 1, which means that its size is equal to one page.
You can make it span multiple pages or a fraction of a page by updating the factor value.
I'm gonna go ahead and add another background image and then tweak some of our values here serve to give us a scene that looks like this.
As we scroll down the page, we get different layers of text animating into it.
And by the way, I obtained these images from pexels.com, which in my opinion is the best place to get free stock photography.
Now, the final piece in the scene is the skydiving cat.
To make that possible, I'm using an animated GIF.
Now, another cool thing about this library is that we can also make a parallax layer sticky, which will keep it in the same place as the user scrolls.
To configure it, we just use the sticky prop and then tell it when to start being sticky and then when to end.
In this case, it will start at the beginning of the second page and end halfway down the 3rd page.
That's pretty cool, but one other thing we might wanna do is jump around to pages more quickly.
We can grab the parallax element with the use ref hook.
That will give us access to a scroll to method.
We can put it to use with an event handler when one of the headings is clicked that will scroll to a specific page automatically.
And now the end user can navigate the entire scene without having to touch the scroll wheel.
With just a few lines of code, we've created a very unique animated web page.
React Spring Parallax is awesome, but it may feel somewhat limited.
Another library that you may wanna check out for more advanced use cases is React's scroll parallax, which provides more control over the elements being animated.
Now, if you're not using React, a vanilla JavaScript library that's been popular for many years is ScrollMagic, stick.
But one thing that needs to be mentioned is that parallax effects in general tend to be overused and abused.
Even though it looks cool It isn't glamorous or cool or kids stuff.
It's the most addictive kind of cocaine and it can kill you.
It can hurt the usability of the site.
Personally, I get kind of annoyed by Apple Landing Pages.
They're visually stunning, but the usability suffers as a result.
When landing pages.
They're visually stunning, but the usability suffers as a result.
When implementing the parallax effect, I'd recommend keeping it fairly subtle with the Firewatch landing page screen, a good example of this.
You can find the source code for this project on GitHub.
And if you like 5 minute tutorials like this, let me know what you wanna next in the comments.
Thanks for watching, and I will see you in the next one.

Speaker 0: The parallax effect. It's one of the oldest and coolest tricks in the design playbook. It works by making different layers of content or backgrounds move at different speeds when the web page is scrolled, creating the optical illusion of three-dimensional depth. It's used extensively on Apple product pages like the new iPhone landing stage and can be used in subtle ways like the Firewatch game, where it feels like you're descending behind a mountain before reaching the main content. Or one of the most mind blowing examples is the boat, which contains 6 chapters of nonstop parallax.

Looks awesome. So how do I implement it on my website? Over the next few minutes, You will build this home page of a cat parachuting from the moon down to the ground using an awesome library called React Spring. Along the way, you'll learn how to quickly transform a boring layout into something amazing. At the end of the video, we will also look at some more advanced possibilities and and drawbacks of the parallax technique.

If you're new here, like and subscribe, and upgrade to FireShip Pro to get more tutorials like this. Let's first make sure we understand how the parallax effect works. We have a background image, 2 images actually, of the moon and a landscape, but we also have text and images in the foreground that scroll at different speeds. On top of that, you'll notice that the text animates in with a springy animation. The cat starts at the bottom and then very slowly scrolls up to the top.

This simulates how perspective and change the relative speed of objects as the viewpoint moves, making the website feel much more alive. To get started, create a React app with your favorite tool. I'm using Vite. From there, install the React Spring Parallax package. If you're not familiar, React Spring is an awesome tool that can easily add life to your components with spring animations, which itself is a technique that relies on physics instead of durations and curves for defining animations.

The library provides 2 components, the first of which is parallax. You can think of a parallax scene as multiple pages. That gives us a context to start animating. To animate the children, we use the parallax layer component. By default, you can think of each layer as a page that will take up the entire screen.

To see it in action, let's go ahead and add 2 different layers. Sis. You can add whatever UI you want inside of them. Using the default settings, you'll notice that they're stacked on top of each other. In this example, we have 4 pages, and by default, each layer will start on the 1st page.

We can change that by updating the offset to 1 on our second layer. That will tell it to start at the top of the second page. Okay. But now it doesn't really do anything interesting. We just have 2 headings like a normal website.

We can start making things look cool by changing the speed of one of the layers. This will tell it to scroll at a different speed than everything else. The difference is subtle, but you'll notice the second layer of text moves at a different speed. And as you move, it will also use a spring animation, making it appear more lifelike. But to really take advantage of Parallax, you'll want to have background images.

Speeds. The parallax layer component can also take a style, inside of which we might define a background image. Now generally speaking, your background images will move slower than everything else, and you may want to have them span multiple pages. The factor prop allows us to do that. By default, every layer will have a factor of 1, which means that its size is equal to one page.

You can make it span multiple pages or a fraction of a page by updating the factor value. I'm gonna go ahead and add another background image and then tweak some of our values here serve to give us a scene that looks like this. As we scroll down the page, we get different layers of text animating into it. And by the way, I obtained these images from pexels.com, which in my opinion is the best place to get free stock photography. Now, the final piece in the scene is the skydiving cat.

To make that possible, I'm using an animated GIF. Now, another cool thing about this library is that we can also make a parallax layer sticky, which will keep it in the same place as the user scrolls. To configure it, we just use the sticky prop and then tell it when to start being sticky and then when to end. In this case, it will start at the beginning of the second page and end halfway down the 3rd page. That's pretty cool, but one other thing we might wanna do is jump around to pages more quickly.

We can grab the parallax element with the use ref hook. That will give us access to a scroll to method. We can put it to use with an event handler when one of the headings is clicked that will scroll to a specific page automatically. And now the end user can navigate the entire scene without having to touch the scroll wheel. With just a few lines of code, we've created a very unique animated web page.

React Spring Parallax is awesome, but it may feel somewhat limited. Another library that you may wanna check out for more advanced use cases is React's scroll parallax, which provides more control over the elements being animated. Now, if you're not using React, a vanilla JavaScript library that's been popular for many years is ScrollMagic, stick. But one thing that needs to be mentioned is that parallax effects in general tend to be overused and abused. Even though it looks cool It isn't glamorous or cool or kids stuff.

It's the most addictive kind of cocaine and it can kill you. It can hurt the usability of the site. Personally, I get kind of annoyed by Apple Landing Pages. They're visually stunning, but the usability suffers as a result. When landing pages.

They're visually stunning, but the usability suffers as a result. When implementing the parallax effect, I'd recommend keeping it fairly subtle with the Firewatch landing page screen, a good example of this. You can find the source code for this project on GitHub. And if you like 5 minute tutorials like this, let me know what you wanna next in the comments. Thanks for watching, and I will see you in the next one.
The parallax effect. It's one of the oldest and coolest tricks in the design playbook. It works by making different layers of content or backgrounds move at different speeds when the web page is scrolled, creating the optical illusion of three-dimensional depth. It's used extensively on Apple product pages like the new iPhone landing stage and can be used in subtle ways like the Firewatch game, where it feels like you're descending behind a mountain before reaching the main content.
animation
graphic design
Or one of the most mind blowing examples is the boat, which contains 6 chapters of nonstop parallax. Looks awesome. So how do I implement it on my website?
Over the next few minutes, You will build this home page of a cat parachuting from the moon down to the ground using an awesome library called React Spring. Along the way, you'll learn how to quickly transform a boring layout into something amazing. At the end of the video, we will also look at some more advanced possibilities and and drawbacks of the parallax technique. If you're new here, like and subscribe, and upgrade to FireShip Pro to get more tutorials like this.
deep learning
animation
Let's first make sure we understand how the parallax effect works.
We have a background image, 2 images actually, of the moon and a landscape, but we also have text and images in the foreground that scroll at different speeds. On top of that, you'll notice that the text animates in with a springy animation. The cat starts at the bottom and then very slowly scrolls up to the top. This simulates how perspective and change the relative speed of objects as the viewpoint moves, making the website feel much more alive. To get started, create a React app with your favorite tool. I'm using Vite. From there, install the React Spring Parallax package. If you're not familiar, React Spring is an awesome tool that can easily add life to your components with spring animations, which itself is a technique that relies on physics instead of durations and curves for defining animations. The library provides 2 components, the first of which is parallax. You can think of a parallax scene as multiple pages. That gives us a context to start animating. To animate the children, we use the parallax layer component. By default, you can think of each layer as a page that will take up the entire screen. To see it in action, let's go ahead and add 2 different layers. Sis. You can add whatever UI you want inside of them.
spring
animation
visualization
photography
cats
Using the default settings, you'll notice that they're stacked on top of each other. In this example, we have 4 pages, and by default, each layer will start on the 1st page. We can change that by updating the offset to 1 on our second layer. That will tell it to start at the top of the second page. Okay. But now it doesn't really do anything interesting. We just have 2 headings like a normal website.
We can start making things look cool by changing the speed of one of the layers. This will tell it to scroll at a different speed than everything else. The difference is subtle, but you'll notice the second layer of text moves at a different speed. And as you move, it will also use a spring animation, making it appear more lifelike. But to really take advantage of Parallax, you'll want to have background images. Speeds. The parallax layer component can also take a style, inside of which we might define a background image.
animation
graphic design
Now generally speaking, your background images will move slower than everything else, and you may want to have them span multiple pages. The factor prop allows us to do that. By default, every layer will have a factor of 1, which means that its size is equal to one page. You can make it span multiple pages or a fraction of a page by updating the factor value.
I'm gonna go ahead and add another background image and then tweak some of our values here serve to give us a scene that looks like this. As we scroll down the page, we get different layers of text animating into it. And by the way, I obtained these images from pexels.com, which in my opinion is the best place to get free stock photography. Now, the final piece in the scene is the skydiving cat. To make that possible, I'm using an animated GIF. Now, another cool thing about this library is that we can also make a parallax layer sticky, which will keep it in the same place as the user scrolls. To configure it, we just use the sticky prop and then tell it when to start being sticky and then when to end.
photography
animation
visualization
art
graphic design
In this case, it will start at the beginning of the second page and end halfway down the 3rd page. That's pretty cool, but one other thing we might wanna do is jump around to pages more quickly. We can grab the parallax element with the use ref hook. That will give us access to a scroll to method. We can put it to use with an event handler when one of the headings is clicked that will scroll to a specific page automatically.
And now the end user can navigate the entire scene without having to touch the scroll wheel. With just a few lines of code, we've created a very unique animated web page. React Spring Parallax is awesome, but it may feel somewhat limited. Another library that you may wanna check out for more advanced use cases is React's scroll parallax, which provides more control over the elements being animated.
animation
Now, if you're not using React, a vanilla JavaScript library that's been popular for many years is ScrollMagic, stick. But one thing that needs to be mentioned is that parallax effects in general tend to be overused and abused.
Even though it looks cool It isn't glamorous or cool or kids stuff. It's the most addictive kind of cocaine and it can kill you. It can hurt the usability of the site. Personally, I get kind of annoyed by Apple Landing Pages. They're visually stunning, but the usability suffers as a result.
apple
When landing pages. They're visually stunning, but the usability suffers as a result. When implementing the parallax effect, I'd recommend keeping it fairly subtle with the Firewatch landing page screen, a good example of this.
You can find the source code for this project on GitHub. And if you like 5 minute tutorials like this, let me know what you wanna next in the comments. Thanks for watching, and I will see you in the next one.
software development
The parallax effect. It's one of the oldest and coolest tricks in the design playbook. It works by making different layers of content or backgrounds move at different speeds when the web page is scrolled, creating the optical illusion of three-dimensional depth. It's used extensively on Apple product pages like the new iPhone landing stage and can be used in subtle ways like the Firewatch game, where it feels like you're descending behind a mountain before reaching the main content. Or one of the most mind blowing examples is the boat, which contains 6 chapters of nonstop parallax. Looks awesome. So how do I implement it on my website? Over the next few minutes, You will build this home page of a cat parachuting from the moon down to the ground using an awesome library called React Spring. Along the way, you'll learn how to quickly transform a boring layout into something amazing. At the end of the video, we will also look at some more advanced possibilities and and drawbacks of the parallax technique. If you're new here, like and subscribe, and upgrade to FireShip Pro to get more tutorials like this. Let's first make sure we understand how the parallax effect works. We have a background image, 2 images actually, of the moon and a landscape, but we also have text and images in the foreground that scroll at different speeds. On top of that, you'll notice that the text animates in with a springy animation. The cat starts at the bottom and then very slowly scrolls up to the top. This simulates how perspective and change the relative speed of objects as the viewpoint moves, making the website feel much more alive. To get started, create a React app with your favorite tool. I'm using Vite. From there, install the React Spring Parallax package. If you're not familiar, React Spring is an awesome tool that can easily add life to your components with spring animations, which itself is a technique that relies on physics instead of durations and curves for defining animations. The library provides 2 components, the first of which is parallax. You can think of a parallax scene as multiple pages. That gives us a context to start animating. To animate the children, we use the parallax layer component. By default, you can think of each layer as a page that will take up the entire screen. To see it in action, let's go ahead and add 2 different layers. Sis. You can add whatever UI you want inside of them. Using the default settings, you'll notice that they're stacked on top of each other. In this example, we have 4 pages, and by default, each layer will start on the 1st page. We can change that by updating the offset to 1 on our second layer. That will tell it to start at the top of the second page. Okay. But now it doesn't really do anything interesting. We just have 2 headings like a normal website. We can start making things look cool by changing the speed of one of the layers. This will tell it to scroll at a different speed than everything else. The difference is subtle, but you'll notice the second layer of text moves at a different speed. And as you move, it will also use a spring animation, making it appear more lifelike. But to really take advantage of Parallax, you'll want to have background images. Speeds. The parallax layer component can also take a style, inside of which we might define a background image. Now generally speaking, your background images will move slower than everything else, and you may want to have them span multiple pages. The factor prop allows us to do that. By default, every layer will have a factor of 1, which means that its size is equal to one page. You can make it span multiple pages or a fraction of a page by updating the factor value. I'm gonna go ahead and add another background image and then tweak some of our values here serve to give us a scene that looks like this. As we scroll down the page, we get different layers of text animating into it. And by the way, I obtained these images from pexels.com, which in my opinion is the best place to get free stock photography. Now, the final piece in the scene is the skydiving cat. To make that possible, I'm using an animated GIF. Now, another cool thing about this library is that we can also make a parallax layer sticky, which will keep it in the same place as the user scrolls. To configure it, we just use the sticky prop and then tell it when to start being sticky and then when to end. In this case, it will start at the beginning of the second page and end halfway down the 3rd page. That's pretty cool, but one other thing we might wanna do is jump around to pages more quickly. We can grab the parallax element with the use ref hook. That will give us access to a scroll to method. We can put it to use with an event handler when one of the headings is clicked that will scroll to a specific page automatically. And now the end user can navigate the entire scene without having to touch the scroll wheel. With just a few lines of code, we've created a very unique animated web page. React Spring Parallax is awesome, but it may feel somewhat limited. Another library that you may wanna check out for more advanced use cases is React's scroll parallax, which provides more control over the elements being animated. Now, if you're not using React, a vanilla JavaScript library that's been popular for many years is ScrollMagic, stick. But one thing that needs to be mentioned is that parallax effects in general tend to be overused and abused. Even though it looks cool It isn't glamorous or cool or kids stuff. It's the most addictive kind of cocaine and it can kill you. It can hurt the usability of the site. Personally, I get kind of annoyed by Apple Landing Pages. They're visually stunning, but the usability suffers as a result. When landing pages. They're visually stunning, but the usability suffers as a result. When implementing the parallax effect, I'd recommend keeping it fairly subtle with the Firewatch landing page screen, a good example of this. You can find the source code for this project on GitHub. And if you like 5 minute tutorials like this, let me know what you wanna next in the comments. Thanks for watching, and I will see you in the next one.
The
the
parallax
parallax
effect.
effect
It's
it's
one
one
of
of
the
the
oldest
oldest
and
and
coolest
coolest
tricks
tricks
in
in
the
the
design
design
playbook.
playbook
It
it
works
works
by
by
making
making
different
different
layers
layers
of
of
content
content
or
or
backgrounds
backgrounds
move
move
at
at
different
different
speeds
speeds
when
when
the
the
web
web
page
page
is
is
scrolled,
scrolled
creating
creating
the
the
optical
optical
illusion
illusion
of
of
three-dimensional
three-dimensional
depth.
depth
It's
it's
used
used
extensively
extensively
on
on
Apple
apple
product
product
pages
pages
like
like
the
the
new
new
iPhone
iphone
landing
landing
stage
stage
and
and
can
can
be
be
used
used
in
in
subtle
subtle
ways
ways
like
like
the
the
Firewatch
firewatch
game,
game
where
where
it
it
feels
feels
like
like
you're
you're
descending
descending
behind
behind
a
a
mountain
mountain
before
before
reaching
reaching
the
the
main
main
content.
content
Or
or
one
one
of
of
the
the
most
most
mind
mind
blowing
blowing
examples
examples
is
is
the
the
boat,
boat
which
which
contains
contains
6
6
chapters
chapters
of
of
nonstop
nonstop
parallax.
parallax
Looks
looks
awesome.
awesome
So
so
how
how
do
do
I
i
implement
implement
it
it
on
on
my
my
website?
website
Over
over
the
the
next
next
few
few
minutes,
minutes
You
you
will
will
build
build
this
this
home
home
page
page
of
of
a
a
cat
cat
parachuting
parachuting
from
from
the
the
moon
moon
down
down
to
to
the
the
ground
ground
using
using
an
an
awesome
awesome
library
library
called
called
React
react
Spring.
spring
Along
along
the
the
way,
way
you'll
you'll
learn
learn
how
how
to
to
quickly
quickly
transform
transform
a
a
boring
boring
layout
layout
into
into
something
something
amazing.
amazing
At
at
the
the
end
end
of
of
the
the
video,
video
we
we
will
will
also
also
look
look
at
at
some
some
more
more
advanced
advanced
possibilities
possibilities
and
and
and
and
drawbacks
drawbacks
of
of
the
the
parallax
parallax
technique.
technique
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
upgrade
upgrade
to
to
FireShip
fireship
Pro
pro
to
to
get
get
more
more
tutorials
tutorials
like
like
this.
this
Let's
let's
first
first
make
make
sure
sure
we
we
understand
understand
how
how
the
the
parallax
parallax
effect
effect
works.
works
We
we
have
have
a
a
background
background
image,
image
2
2
images
images
actually,
actually
of
of
the
the
moon
moon
and
and
a
a
landscape,
landscape
but
but
we
we
also
also
have
have
text
text
and
and
images
images
in
in
the
the
foreground
foreground
that
that
scroll
scroll
at
at
different
different
speeds.
speeds
On
on
top
top
of
of
that,
that
you'll
you'll
notice
notice
that
that
the
the
text
text
animates
animates
in
in
with
with
a
a
springy
springy
animation.
animation
The
the
cat
cat
starts
starts
at
at
the
the
bottom
bottom
and
and
then
then
very
very
slowly
slowly
scrolls
scrolls
up
up
to
to
the
the
top.
top
This
this
simulates
simulates
how
how
perspective
perspective
and
and
change
change
the
the
relative
relative
speed
speed
of
of
objects
objects
as
as
the
the
viewpoint
viewpoint
moves,
moves
making
making
the
the
website
website
feel
feel
much
much
more
more
alive.
alive
To
to
get
get
started,
started
create
create
a
a
React
react
app
app
with
with
your
your
favorite
favorite
tool.
tool
I'm
i'm
using
using
Vite.
vite
From
from
there,
there
install
install
the
the
React
react
Spring
spring
Parallax
parallax
package.
package
If
if
you're
you're
not
not
familiar,
familiar
React
react
Spring
spring
is
is
an
an
awesome
awesome
tool
tool
that
that
can
can
easily
easily
add
add
life
life
to
to
your
your
components
components
with
with
spring
spring
animations,
animations
which
which
itself
itself
is
is
a
a
technique
technique
that
that
relies
relies
on
on
physics
physics
instead
instead
of
of
durations
durations
and
and
curves
curves
for
for
defining
defining
animations.
animations
The
the
library
library
provides
provides
2
2
components,
components
the
the
first
first
of
of
which
which
is
is
parallax.
parallax
You
you
can
can
think
think
of
of
a
a
parallax
parallax
scene
scene
as
as
multiple
multiple
pages.
pages
That
that
gives
gives
us
us
a
a
context
context
to
to
start
start
animating.
animating
To
to
animate
animate
the
the
children,
children
we
we
use
use
the
the
parallax
parallax
layer
layer
component.
component
By
by
default,
default
you
you
can
can
think
think
of
of
each
each
layer
layer
as
as
a
a
page
page
that
that
will
will
take
take
up
up
the
the
entire
entire
screen.
screen
To
to
see
see
it
it
in
in
action,
action
let's
let's
go
go
ahead
ahead
and
and
add
add
2
2
different
different
layers.
layers
Sis.
sis
You
you
can
can
add
add
whatever
whatever
UI
ui
you
you
want
want
inside
inside
of
of
them.
them
Using
using
the
the
default
default
settings,
settings
you'll
you'll
notice
notice
that
that
they're
they're
stacked
stacked
on
on
top
top
of
of
each
each
other.
other
In
in
this
this
example,
example
we
we
have
have
4
4
pages,
pages
and
and
by
by
default,
default
each
each
layer
layer
will
will
start
start
on
on
the
the
1st
1st
page.
page
We
we
can
can
change
change
that
that
by
by
updating
updating
the
the
offset
offset
to
to
1
1
on
on
our
our
second
second
layer.
layer
That
that
will
will
tell
tell
it
it
to
to
start
start
at
at
the
the
top
top
of
of
the
the
second
second
page.
page
Okay.
okay
But
but
now
now
it
it
doesn't
doesn't
really
really
do
do
anything
anything
interesting.
interesting
We
we
just
just
have
have
2
2
headings
headings
like
like
a
a
normal
normal
website.
website
We
we
can
can
start
start
making
making
things
things
look
look
cool
cool
by
by
changing
changing
the
the
speed
speed
of
of
one
one
of
of
the
the
layers.
layers
This
this
will
will
tell
tell
it
it
to
to
scroll
scroll
at
at
a
a
different
different
speed
speed
than
than
everything
everything
else.
else
The
the
difference
difference
is
is
subtle,
subtle
but
but
you'll
you'll
notice
notice
the
the
second
second
layer
layer
of
of
text
text
moves
moves
at
at
a
a
different
different
speed.
speed
And
and
as
as
you
you
move,
move
it
it
will
will
also
also
use
use
a
a
spring
spring
animation,
animation
making
making
it
it
appear
appear
more
more
lifelike.
lifelike
But
but
to
to
really
really
take
take
advantage
advantage
of
of
Parallax,
parallax
you'll
you'll
want
want
to
to
have
have
background
background
images.
images
Speeds.
speeds
The
the
parallax
parallax
layer
layer
component
component
can
can
also
also
take
take
a
a
style,
style
inside
inside
of
of
which
which
we
we
might
might
define
define
a
a
background
background
image.
image
Now
now
generally
generally
speaking,
speaking
your
your
background
background
images
images
will
will
move
move
slower
slower
than
than
everything
everything
else,
else
and
and
you
you
may
may
want
want
to
to
have
have
them
them
span
span
multiple
multiple
pages.
pages
The
the
factor
factor
prop
prop
allows
allows
us
us
to
to
do
do
that.
that
By
by
default,
default
every
every
layer
layer
will
will
have
have
a
a
factor
factor
of
of
1,
1
which
which
means
means
that
that
its
its
size
size
is
is
equal
equal
to
to
one
one
page.
page
You
you
can
can
make
make
it
it
span
span
multiple
multiple
pages
pages
or
or
a
a
fraction
fraction
of
of
a
a
page
page
by
by
updating
updating
the
the
factor
factor
value.
value
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
add
add
another
another
background
background
image
image
and
and
then
then
tweak
tweak
some
some
of
of
our
our
values
values
here
here
serve
serve
to
to
give
give
us
us
a
a
scene
scene
that
that
looks
looks
like
like
this.
this
As
as
we
we
scroll
scroll
down
down
the
the
page,
page
we
we
get
get
different
different
layers
layers
of
of
text
text
animating
animating
into
into
it.
it
And
and
by
by
the
the
way,
way
I
i
obtained
obtained
these
these
images
images
from
from
pexels.com,
pexels.com
which
which
in
in
my
my
opinion
opinion
is
is
the
the
best
best
place
place
to
to
get
get
free
free
stock
stock
photography.
photography
Now,
now
the
the
final
final
piece
piece
in
in
the
the
scene
scene
is
is
the
the
skydiving
skydiving
cat.
cat
To
to
make
make
that
that
possible,
possible
I'm
i'm
using
using
an
an
animated
animated
GIF.
gif
Now,
now
another
another
cool
cool
thing
thing
about
about
this
this
library
library
is
is
that
that
we
we
can
can
also
also
make
make
a
a
parallax
parallax
layer
layer
sticky,
sticky
which
which
will
will
keep
keep
it
it
in
in
the
the
same
same
place
place
as
as
the
the
user
user
scrolls.
scrolls
To
to
configure
configure
it,
it
we
we
just
just
use
use
the
the
sticky
sticky
prop
prop
and
and
then
then
tell
tell
it
it
when
when
to
to
start
start
being
being
sticky
sticky
and
and
then
then
when
when
to
to
end.
end
In
in
this
this
case,
case
it
it
will
will
start
start
at
at
the
the
beginning
beginning
of
of
the
the
second
second
page
page
and
and
end
end
halfway
halfway
down
down
the
the
3rd
3rd
page.
page
That's
that's
pretty
pretty
cool,
cool
but
but
one
one
other
other
thing
thing
we
we
might
might
wanna
wanna
do
do
is
is
jump
jump
around
around
to
to
pages
pages
more
more
quickly.
quickly
We
we
can
can
grab
grab
the
the
parallax
parallax
element
element
with
with
the
the
use
use
ref
ref
hook.
hook
That
that
will
will
give
give
us
us
access
access
to
to
a
a
scroll
scroll
to
to
method.
method
We
we
can
can
put
put
it
it
to
to
use
use
with
with
an
an
event
event
handler
handler
when
when
one
one
of
of
the
the
headings
headings
is
is
clicked
clicked
that
that
will
will
scroll
scroll
to
to
a
a
specific
specific
page
page
automatically.
automatically
And
and
now
now
the
the
end
end
user
user
can
can
navigate
navigate
the
the
entire
entire
scene
scene
without
without
having
having
to
to
touch
touch
the
the
scroll
scroll
wheel.
wheel
With
with
just
just
a
a
few
few
lines
lines
of
of
code,
code
we've
we've
created
created
a
a
very
very
unique
unique
animated
animated
web
web
page.
page
React
react
Spring
spring
Parallax
parallax
is
is
awesome,
awesome
but
but
it
it
may
may
feel
feel
somewhat
somewhat
limited.
limited
Another
another
library
library
that
that
you
you
may
may
wanna
wanna
check
check
out
out
for
for
more
more
advanced
advanced
use
use
cases
cases
is
is
React's
react's
scroll
scroll
parallax,
parallax
which
which
provides
provides
more
more
control
control
over
over
the
the
elements
elements
being
being
animated.
animated
Now,
now
if
if
you're
you're
not
not
using
using
React,
react
a
a
vanilla
vanilla
JavaScript
javascript
library
library
that's
that's
been
been
popular
popular
for
for
many
many
years
years
is
is
ScrollMagic,
scrollmagic
stick.
stick
But
but
one
one
thing
thing
that
that
needs
needs
to
to
be
be
mentioned
mentioned
is
is
that
that
parallax
parallax
effects
effects
in
in
general
general
tend
tend
to
to
be
be
overused
overused
and
and
abused.
abused
Even
even
though
though
it
it
looks
looks
cool
cool
It
it
isn't
isn't
glamorous
glamorous
or
or
cool
cool
or
or
kids
kids
stuff.
stuff
It's
it's
the
the
most
most
addictive
addictive
kind
kind
of
of
cocaine
cocaine
and
and
it
it
can
can
kill
kill
you.
you
It
it
can
can
hurt
hurt
the
the
usability
usability
of
of
the
the
site.
site
Personally,
personally
I
i
get
get
kind
kind
of
of
annoyed
annoyed
by
by
Apple
apple
Landing
landing
Pages.
pages
They're
they're
visually
visually
stunning,
stunning
but
but
the
the
usability
usability
suffers
suffers
as
as
a
a
result.
result
When
when
landing
landing
pages.
pages
They're
they're
visually
visually
stunning,
stunning
but
but
the
the
usability
usability
suffers
suffers
as
as
a
a
result.
result
When
when
implementing
implementing
the
the
parallax
parallax
effect,
effect
I'd
i'd
recommend
recommend
keeping
keeping
it
it
fairly
fairly
subtle
subtle
with
with
the
the
Firewatch
firewatch
landing
landing
page
page
screen,
screen
a
a
good
good
example
example
of
of
this.
this
You
you
can
can
find
find
the
the
source
source
code
code
for
for
this
this
project
project
on
on
GitHub.
github
And
and
if
if
you
you
like
like
5
5
minute
minute
tutorials
tutorials
like
like
this,
this
let
let
me
me
know
know
what
what
you
you
wanna
wanna
next
next
in
in
the
the
comments.
comments
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains the concept of the anteax effect, a technique used in the design playbook for websites to create a home page from the moon to the ground using React Spring Parallax. They also discuss the use of React Spring Parallax for responsive elements and the importance of background images for the effect. The speaker recommends using a vanilla JavaScript library called ScrollQuad stick for more use cases and recommends keeping the design subtle with the Firewatch landing page screen.
The Parallax Effect // 5 Minute WebDev Project
The parallax effect. It's one of the oldest and coolest tricks in the design playbook. It works by making different layers of content or backgrounds move at different speeds when the web page is scrolled, creating the optical illusion of three-dimensional depth. It's used extensively on Apple product pages like the new iPhone landing stage and can be used in subtle ways like the Firewatch game, where it feels like you're descending behind a mountain before reaching the main content. Or one of the most mind blowing examples is the boat, which contains 6 chapters of nonstop parallax. Looks awesome. So how do I implement it on my website? Over the next few minutes, You will build this home page of a cat parachuting from the moon down to the ground using an awesome library called React Spring. Along the way, you'll learn how to quickly transform a boring layout into something amazing. At the end of the video, we will also look at some more advanced possibilities and and drawbacks of the parallax technique. If you're new here, like and subscribe, and upgrade to FireShip Pro to get more tutorials like this. Let's first make sure we understand how the parallax effect works. We have a background image, 2 images actually, of the moon and a landscape, but we also have text and images in the foreground that scroll at different speeds. On top of that, you'll notice that the text animates in with a springy animation. The cat starts at the bottom and then very slowly scrolls up to the top. This simulates how perspective and change the relative speed of objects as the viewpoint moves, making the website feel much more alive. To get started, create a React app with your favorite tool. I'm using Vite. From there, install the React Spring Parallax package. If you're not familiar, React Spring is an awesome tool that can easily add life to your components with spring animations, which itself is a technique that relies on physics instead of durations and curves for defining animations. The library provides 2 components, the first of which is parallax. You can think of a parallax scene as multiple pages. That gives us a context to start animating. To animate the children, we use the parallax layer component. By default, you can think of each layer as a page that will take up the entire screen. To see it in action, let's go ahead and add 2 different layers. Sis. You can add whatever UI you want inside of them. Using the default settings, you'll notice that they're stacked on top of each other. In this example, we have 4 pages, and by default, each layer will start on the 1st page. We can change that by updating the offset to 1 on our second layer. That will tell it to start at the top of the second page. Okay. But now it doesn't really do anything interesting. We just have 2 headings like a normal website. We can start making things look cool by changing the speed of one of the layers. This will tell it to scroll at a different speed than everything else. The difference is subtle, but you'll notice the second layer of text moves at a different speed. And as you move, it will also use a spring animation, making it appear more lifelike. But to really take advantage of Parallax, you'll want to have background images. Speeds. The parallax layer component can also take a style, inside of which we might define a background image. Now generally speaking, your background images will move slower than everything else, and you may want to have them span multiple pages. The factor prop allows us to do that. By default, every layer will have a factor of 1, which means that its size is equal to one page. You can make it span multiple pages or a fraction of a page by updating the factor value. I'm gonna go ahead and add another background image and then tweak some of our values here serve to give us a scene that looks like this. As we scroll down the page, we get different layers of text animating into it. And by the way, I obtained these images from pexels.com, which in my opinion is the best place to get free stock photography. Now, the final piece in the scene is the skydiving cat. To make that possible, I'm using an animated GIF. Now, another cool thing about this library is that we can also make a parallax layer sticky, which will keep it in the same place as the user scrolls. To configure it, we just use the sticky prop and then tell it when to start being sticky and then when to end. In this case, it will start at the beginning of the second page and end halfway down the 3rd page. That's pretty cool, but one other thing we might wanna do is jump around to pages more quickly. We can grab the parallax element with the use ref hook. That will give us access to a scroll to method. We can put it to use with an event handler when one of the headings is clicked that will scroll to a specific page automatically. And now the end user can navigate the entire scene without having to touch the scroll wheel. With just a few lines of code, we've created a very unique animated web page. React Spring Parallax is awesome, but it may feel somewhat limited. Another library that you may wanna check out for more advanced use cases is React's scroll parallax, which provides more control over the elements being animated. Now, if you're not using React, a vanilla JavaScript library that's been popular for many years is ScrollMagic, stick. But one thing that needs to be mentioned is that parallax effects in general tend to be overused and abused. Even though it looks cool It isn't glamorous or cool or kids stuff. It's the most addictive kind of cocaine and it can kill you. It can hurt the usability of the site. Personally, I get kind of annoyed by Apple Landing Pages. They're visually stunning, but the usability suffers as a result. When landing pages. They're visually stunning, but the usability suffers as a result. When implementing the parallax effect, I'd recommend keeping it fairly subtle with the Firewatch landing page screen, a good example of this. You can find the source code for this project on GitHub. And if you like 5 minute tutorials like this, let me know what you wanna next in the comments. Thanks for watching, and I will see you in the next one.
The speaker explains the concept of the anteax effect, a technique used in the design playbook for websites to create a home page from the moon to the ground using React Spring Parallax. They also discuss the use of React Spring Parallax for responsive elements and the importance of background images for the effect. The speaker recommends using a vanilla JavaScript library called ScrollQuad stick for more use cases and recommends keeping the design subtle with the Firewatch landing page screen.