In this tutorial we are practically going
to learn about sliding parallax effect on
background within an HTML page.
That means in this case if we move our cursor
into this HTML page, as we can see that this
whole background has started to shift towards
left and everything is going at a different
speed as you can see providing
an additional 3D effect on this one.
So this is what we are going to learn about
today.
Hello and welcome to another new episode of
learning simplified.
In this
tutorial today we are going to learn about
how to create a sliding parallax background
effect with css3 animation.
As you can see if we move our cursor into
this
HTML page all we can see that it is actually
involving into an HTML hover effect and the
whole background is shifting towards left
sliding towards left and each and
every elements inside practically attenuating
into a different speed, with a varying speed
such as if you look into this planet here,
it is moving with a relatively
slower speed and the stars are moving relatively
faster, and the background Galaxy are moving
relatively slower compared to others.
So this is what we are going to
learn today.
Now as you can see over here, we have created
these two pages, this index.HTML and stylesheet.CSS.
Both of these are created previously and here's
the
declaration of hTML5 that comes here as usual,
hack code, and in stylesheet.CSS, what I have
done over here previously is that, defining
the universal selector and
defining a default selector, html which has
a background of black.
Now in this context you will be learning about
multiple things such as, how to create a
multiple background into an HTML page and
of course this sliding parallax effect that
we are talking about.
Now let's get back into our tutorial.
First of all get
back to stylesheet.CSS.
Now here, I am creating an ID, background.
Another thing,let's prepare some images first.
If we look into here, we can see that these
are
the images those will be practically used
in our tutorial, into this tutorial.
This is the first one, this is the second
one, this is the third one, this is the
stars.PNG.
All of these images those are practically
being used over here.
So I have prepared these individual images
and right now I will be placing these images
into this ID background.
And this will be multiple in number.
So today we are going to learn first how to
create multiple background into an HTML page
and the syntax goes as follows...
Just
write the syntax first so we can see that
we have placed four individual images.
All things those are left Behind is to place
some additional information about the
position, and about the rest of the things,
defining the details about images.
So I am just mentioning here that this URL
images earthimage11.PNG that means this
planet image over here we can see this image
this will be starting from extreme left, so
I am placing here 90% from left, 90% margin
from left and 50% margin from
top and it will be non repeating in action.
For this one, this image Galaxybg1.PNG,that
means this one, this image will be repeating
in nature as we can see here,
this Galaxybg.PNG as we can see here is repeating
here, except this planet image everything
else will be repeating in nature.
So this is what we are going to show
over here.
Third one, and the fourth one is galaxybg1.PNG.
I think we have made a mistake over here,
we have to practically bring on this image
night sky BG 1.PNG,
not GalaxyBG.PNG.
Repeat it again, and I am just leaving it
as it is.
Now just get back over here, and for this
Galaxy BG.
PNG, repeat, ok everything is fine so far.
Now we are mentioning the position.
get back to index.html.
Here inside this index.htm call the ID name
which is known as background.
Now as we can see over here
everything is fine and placed perfectly in
order.
So this is the Planet image as we have told
you earlier,and these are the background images
starfield and this is
the Galaxybg, this is the background, in the
background we can see that the night sky BG
image that we have told you were here we have
introduced it over here,
everything that is left is to introduce some
animation effect.
So in doing so first of all we need to define
some transition.
Now we need to mention here this
transition which is left and then we are defining
the time duration which is 50 seconds and
then we are defining the the type of this
transition, it will be linear,
since I am making it flat animation from start
or beginning it will be executing a flat speed
as we have mentioned here it will be a linear
one.
So before making
anything first of all we have to check it
out that this animation is running well and
it is making a smooth and animation.
So all we need to do we need to provide
this hover action as I have told you this
that this thing will be working with hover
action so we need to mention a hover action
over here so that is why I am
creating another div which is known as container
and this container on hover action, it will
execute it will execute of total shifting
of for say I have provided
this one this is the ID container, on hovering
this ID container, the ID background is directly
lying under this container.
This will be shifting a total
displacement of - 10,000px towards left.
Now the things that we left Behind is to get
back to index.hTML first and here I have to
mention this div ID container.
Press control + s, back to your browser and
reload and now we can see that everything
is moving as per schedule.
So we can see that this planet is moving at
a
relatively slow speed but the rest of the
things those are not moving independently.
So you need to do we need to add a 3D effect
to this animation . In this
purpose, that is why we are getting back to
our stylesheet.css and here.. again get back
to your index.html.
Get back to your browser, reload and now we
can see
that everything of them are moving independently
now.
Just shift this star.PNG right before this
GalaxyBG.PNG. as we can see this thing is
happening over here
everything is now moving independently,
This star field, the Galaxy field.
First of all we need to make the other things
that we have not done yet, that is, providing
the hack codes.
So the main
disadvantage this types of animation have
if you see that you have provided a particular
time duration that means this animation will
be taking place only for 50
seconds.
So after 50 seconds, this animation will not
be in effect and it will be pausing as we
can see over here, if you move your mouse
into and you just hold on
for 50 seconds just hold on now for 50 seconds
and you'll be seeing that this animation is
ceased, this animation is stopped and it is
not working anymore.
So let's
wait for 50 seconds here.
now as we can see that this animation is stopped.
Now the question is what if I want to create
this one.
No this is the actual thing, that
means, creating a website that will be having
some actual contents something like text documents
,something like images.
So you have to chalk out this thing how to
insert some contents this kind of this sort
of website where you are having an animated
background and you will be seeing it's quiet
a tougher job.
This is not
practically hardest thing to do, to create
an animation.
The main problem is trying to create something
like this one.
You are practically pouring some contents
into your website and this is the hardest
thing and you will be facing it very difficult
one to insert some contents inside your website.
So this is the main
question of this tutorial, this is the content
that we can see this is a header one, this
is the text document gets present within this
and this is a footer one.
So all you need to do , you need to make some
experiments and find out the question how
to insert this contents inside your HTML page?
so this is the thing this
is the question that you need to answer me,
to comment me back after you try hard at home
and if you are done then it is alright,and
if you are undone, then it is
also quite alright, you may ask me, comment
me back with your results.
So hope you have liked our tutorial.
In the next one we will be seeing how to create
this
animation effect without any Hover action
that means we will be using some key frame
animation to create this same animation effect
over here.
If you guys liked our
video please do not hesitate to hit that red
subscribe button.
Hope to see you guys in the next tutorial,
until then, bye.
[Applause..]
