Now to add such a parallax effect,
you can Google for parallax
and you'll find a lot of explanations here.
Also, some tutorial articles that
tell you how to create your own parallax effect,
how to build your own parallax effect with JavaScript,
but you will also find third-party packages that help you,
especially if you don't just search for Parallax,
but parallax.js.
So to search for JavaScript packages that help with that,
you'll then find various packages, and again, more examples,
and you should also simpleparallax.com,
which is the package we're now going to use.
It's not the only package, but it's a great package,
very easy to use, and that's why we will use it here.
Now here, you also see a preview, this image here,
this effect, right where this image scrolls internally,
whilst the rest of the page scrolls as well,
that's the parallax effect, which you see here.
We can easily add that effect here
by including this package, this JavaScript package,
which is now a pure JavaScript package,
has nothing to do with CSS into our page.
Again, we get such import link here in the end,
such a script tag,
which points to a JavaScript file that is served by some
other server.
And we can therefore,
simply grab that and hire script element here from that
simpleparallax.com page,
and in Parallax HTML, here,
I'll add it in my head section, and also add this defer
attribute here, which I added before as well.
Now we are including this package,
but now we need to do more than what we did before with
Bootstrap.
With Bootstrap, including the JavaScript package
was all we had to do,
because we use these bootstrap components.
We used the HTML code with certain CSS classes and,
very important, with certain data attributes.
I briefly mentioned this in the last lectures as well.
The Bootstrap JavaScript code, when included in your page,
basically looks for certain CSS classes,
since it knows that these classes are part of Bootstrap,
since the JavaScript code is part of the same package.
and it will look for a certain data-attributes,
since these data-attributes add extra configuration to
your HTML code that will be picked up
by the Bootstrap JavaScript code.
So it automatically looks for that,
and that's why it's working magically behind the scenes;
because you're using all these different tools from the
bootstrap package.
Now with this Parallax JavaScript package, it's different,
I'm including it, but this package,
unlike the bootstrap package,
doesn't tell me that I have to use certain CSS classes or
add certain data dash attributes to certain elements on the
page. Instead to use this package,
we have to write some custom JavaScript code.
We have to select the element,
the image on which we want to apply the parallax effect,
with the tools we learned about in the course already,
for example, Get Element by ID.
And then we have to run this code and pass our selected
object, our Dom object to that code,
to activate this package,
this JavaScript package here.
So to tell it on which element,
it should apply that parallax effect.
And to do that, I'll therefore write
my own JavaScript file here.
The parallax.js file is what I'll add,
the name is up to you though.
And then parallax.html, after including the third-party
package and the order matters because our code will use code
from that package.
So the package code needs to be loaded first,
before our code runs.
So after this link to the simple parallax package,
I'll add another script element and now link to my own code,
in parallax.js and also defer this, so that it also only
executes after the entire other content has been paused.
And now inside of parallax JS,
we can select the element on which we want to apply the
effect, and then use this built in function in the end,
which it is from that parallax package,
to activate that effect.
So for this here in parallax.js,
I'll first of all create a constant,
since I'll never assign a new value to it,
where I want to store this image, basically.
Now this image has the ID main image,
so we can select it by that ID.
And I have my image element here,
which I select by running document.getElementbyID
and passing main image to it.
And now, we just need to do what we see here.
We need to run simpleParallax and pass our element,
in this case our image element to it and, very important,
we need this new keyword.
Now,
if you followed along in that previous course section where
we built a tic-tac-toe game,
you saw that new keyword there as well.
It's basically another way off creating JavaScript objects,
based on certain blueprints.
As simple parallax is a function provided by the parallax
JavaScript package that has a blueprint for a certain kind
of object.
And we create an object based on the blueprint with that new
keyword.
And that blueprint then also wants to know,
which Dom element it should use,
to add the parallax effect too.
We are going to dive deeper,
into the new keyword and JavaScript objects,
and more advanced techniques related to that,
later in the course.
For the moment,
all you need to know is that this will basically activate
this parallax effect on this image with help of that third
party package.
And therefore if you now save this file,
and all the other files are saved as well,
if you go back to your page and you reload,
you see that as I scroll, it might be hard to spot,
but watch the strawberries at the bottom here.
This image has the parallax effect.
We have some scrolling inside of the image besides them
scrolling on the page overall,
and this can create a cool effect,
a very nice effect on your page.
Here of course, it's very subtle, but we can see it.
And we can also configure it.
On the simple parallax page,
we learned that we can configure this parallax effect,
and we can control how it should behave.
But for example,
what should be the direction of this inner scrolling in the
image?
And we can also control when it should start to scroll,
and so on.
To add this configuration,
we just need to pass a second parameter to this simple
parallax function, with a comma and that's a object,
which we just create with these curly braces.
And then there, we can set all these options we see here.
Now, for example,
we could try what happens if we set scale to one dot six,
instead of one dot two, which is the default,
as you can see here.
And we can see what happens,
if we set delay to zero dot one,
instead of zero dot four, which is the default.
If we now save that and we go back here to this page,
and reload, now the effect
is a bit clearer to see, hopefully.
And that is how we could add such a fact,
which is very subtle,
but requires quite a bit of JavaScript code.
And that's another example where
third party packages can help us.
And it's all as an example for a pure JavaScript,
third party package,
where we don't include any additional CSS file for this
package, but just a JavaScript file,
which is hosted on some other server.
And then we activate it with our own JavaScript code,
but this is way less code than we would have to write if we
built this entire effect on our own and more on that in the
next lecture.