Скачать или смотреть CSS Advanced Tutorial: Parallax scrolling

Parallax scrolling

03.zip https://drive.google.com/open?id=1o4h...

Parallax scrolling along with playing animations on scroll.
The use of parallax movement on scroll is another popular trick in this lesson we'll look into what
parallax can do for our designs and we'll use a handy javascript plugin called relaxed to animate along
landing page with lots of elements scrolling at different speeds.
To get started.
Open the module three sample code file and look for Folder 0 3 start a completed version of this lessons
code is in the folder 0 3 and
parallax movement is when things move at different speeds relative to each other.
It's a popular effect that can be used to create an illusion of depth if we're moving we see objects
close to us move faster than objects further away.
The technique is popular in many places including video games where it's usually seen in layered backgrounds
in this example.
Each of these boxes scrolls upward as I scroll down the page.
The box in the middle marks no parallax is scrolling at the same speed as the page to its left is a
box that scrolls faster and the box on the right scrolls slower.
In this example I'm using a tool called relax
the javascript utility relax is a handy and quite simple plug in created by the design agency Dixon
and Mo.
It's lightweight and has no need for J query and we can call it in from either local file or by using
a CDM and looking into the code.
We find that it's using a very similar approach to our show on scroll code.
It sets up a loop variable using request animation frame
and then in each iteration uses CSX to translate each object by a calculated offset it's worth taking
a look through how this was built.
If you'd like to see higher nice simple javascript utility can be written and shared.
Let's use it to bring our page some parallax movement
to get started.
We have a space themed page taking us on a trip to the moon along the way.
We'll pass a bunch of rocks.
We can use relax to have these elements scroll at different speeds.
We begin by adding relax to a page in the index to estimate file just before the closing body tag.
Add a reference to the script.
We also put in some javascript to activate relax.
We pass the relax method a string that will be used to identify the elements it'll need to animate.
In this case we're going to use the class relax on our elements.
With this in place we can add the relax class scrolling back up the estimable.
We can look for each of the floating rocks elements we add the relax class to each.
Like so
with the class applied to each of the rocks we can see the effect in the prior
so it's working.
The rocks are scrawling at a slower speed than the text but it's not right yet all the rocks are moving
at the same speed as each other.
We'd like to have some sit in front of the text and some behind.
So let's achieve this using some relax settings
when working with relax.
We have two pieces of data we can pass in.
That will change the way the movement occurs.
The first is speed.
We can tell each image to scrawl at a different speed.
The value is an integer where a negative number means it'll move more slowly than the normal scroll
speed and a positive number means it'll move at the same speed or faster in our reach MLB again go to
each of the images.
But this time at a speed it's written as a data attribute data.
Relax.
Speed the first rock is a small one that sits in front.
So we'll give it a fast speed of eight.
The second one is far back so we're going to have speed of minus two
the next one in front again so we'll give it a positive value of three
and the next rock is also far back so we'll give it a speed of negative 3.
Lastly for the planet Earth we'll set it far back into the scene with a speed of minus 4.
There's one more thing centering when relax calculates high far to move the elements it does so based
on the height of the page.
This means that elements further down the page will have moved more than elements at the top as we scroll
by the time We scrolled all the way down to the bottom of the page they've been parallax off to somewhere
we may not expect we can get around this by using centering.