In this tutorial we are practically going
to learn how to create this kind of animation
using css3 transform and making this animation
infinite such that there's no need for
any kind of hover action.
So this is the main thing that we are going
to learn today.
[Music]...
Hello and welcome to another new episode of
learning simplified.
In
this tutorial we are going to know about how
to introduce css3 keyframe animation into
making this kind of animation that means,
the animated multiple background
images with the aid of css3 keyframe animation.
This thing is super easy to do, super easy
to perform, and the second thing is no JavaScript
is practically required
in this case.
so once again I have created two separate
pages, index .hTML and style sheet.
CSS.
And let's take a look at those images that
we are about to use in
this tutorial.That means all these images
, those are practically separated images,
separated PNG images, those will be used over
here.
So this is the first image,
this is the earth.PNG, as we can see this
is the individual image of this planet. and
this is the second image, galaxybg.
PNG, that we will be using into this
animation action, and there's a nightskybg.png
as we can see over here.
This is is the thing that has been created.
This is the nightskybg.png that has been created,
the last but not least we have created a separate
stars.png we can see.
So this is the thing that we will be noticing,
that we will be experiencing, in building
the
background of HTML page.The main background
colour of this HTML page will be black.
So let's hop in to our tutorial.
I have created a style sheet.css where I have
placed all this codings, and this is the universal
selector and this is the default selector
that I have placed
individually and I provided that the background
colour is black so I have poured a background
colour as Black.
And the body is placed at a height of 100%
and an id
has been created with an ID name of background
and index.
HTML, I have used hTML5 as you can see this
is the declaration of hTML5.now let's get
back to
stylesheet.CSS and start coding.
So first of all I am providing here the first
image...
So I am placing this earthbg.png here.
And all we are going to do we are going to
mention some position over
here as we can see,from left we are leaving
a total margin of 90%.
And from top we are leaving total margin of,
no I am leaving 20%.
Then after this I am attributing
this sort of...
Let's make preposition absolute.
Now before making any move over there first
of all, let's get back to index.HTML call
this ID name, now let's get
back to our project and this is the project
actually that we have created at first condition
when nothing else were here except this default
selector attribution
which had background colour of black.
This was in the first case.
Now let's reload and see what happens after
we make those coding.
Now we can see here this earth.PNG
this has been appeared over here and it is
repeating in nature as we never mentioned
any kind of repetition attribute for this.
So all we need to do we need to
mention here no repeat.
Just reload.
And we can see that after no repeat attribute
this earth.PNG is appearing right over there
where we actually wanted it to be.
Now let's think about the animation.
so all I am doing over here I am creating
this animation,I name it as animated-bg , which
has a time duration of 50 seconds and
the animation type will be linear that means
it will be maintaining a flat speed from start
to end, I am just mentioning this iteration
count which is infinite.
Now
all I need to do we need to....
I hope you previously remember the term always
reuse, but do not recreate.
So this is the same thing that we are doing
here . I am
copying this animation name and pasting it
here to avoid any kind of errors.
Now there goes reanimation.
No it may arise some question, why this kind
of coding as we
can see this is the and initial condition
or initial position of the planet .from this
position it will be merging towards this position
which is at -20% margin from
left and 20% margin from top this.
This percentage has been intact it is never
changed as we can see here.
Now all we have to do we have to press control
+ s get back to our browser and reload we
can see that an animation is initiated and
slowly this is planet Earth, this planet is
practically moving from extreme right to its
left position.
And this whole animation will be taking place
for 50 seconds.
Now if we get back to our, actually what we
want we want that this planet will be merging
out from its extreme right and it will be
disappearing out again and it will be converging
out of this Canvas out of this HTML Browser
as we can see beyond its view port and it
will be disappearing.
So all we need to do we need to increase this
extreme margin.
As we can see over here this planet is now
emerging out from its extreme right and it
is now moving towards its extreme left and
it will be out of this scope of this view
port.
Actually we have made this amendments in the
position of this planet as you can see it
has been enhanced to 120% and it is a positive
value and from this this positive value it
is practically moving towards a negative value
that means it is moving opposite
to this left margin.
So till then it is perfect.
It has no problem.
now let's introduce rest of the images so
let's get back to our project and over here
all we need to do we need to create those
multiple
backgrounds.
Now if we just press control +s and get back
to our project and reload now we can see that
this thing is appearing over here and we also
may notice that
without any kind of animation attribution
all this things are getting animated you see
all these things are moving however Slow it
is.
all of them are practically
moving and practical they are moving at a
different speed and see yourself over here.
So what is the main main cause behind it,
this is the main question and this is
the question that I would like to ask to you.
Now let's make some attribution to this so
we are getting back to our project and here
we have placed some additional
background position so all we need to do first
we need to mention them over here.
these are the initial positions that has been
mentioned over here.
As we have
mentioned this initial positions all we need
to do now we need to mention these final positions
so that is what we are going to do.
So as we can see.
Now let's get
back to our project.
And reload.
Another thing all we need to do we have to
make some certain changes over here we will
be checking in the rest of the things, ok
its
alright so far we are just changing this values
over here from this 30000 percentage I have
just reduced it did -10000%.
Let's know Press control s and get back to
our project and and reload now you can see
this that these Galaxybg.png it is practically
shifting towards the right and....
So now we can see each and every
components of these hTML page that is moving
that is practically being animated.
this animated background, this earth11 PNG,
this star field, this night sky, all
these things are moving at different speed,
at a varying speed that is why it is practically
providing a 3D effect and this animation this
is taking place for 50
seconds and after 50 seconds it is just recurring,
being recurrent over here it's just repeating
itself as we can see everything is now happening
over here.
Now it
is time for the question of the day.
The question is we have previously despite
we haven't provided any this kind of things
in the first place we didn't provide
practically any of these values over here,
right?
I hope you can still remember.
You will see that if you reload you may see
that the animation process is continuing,
however mild it is we can see that all of
them are being shifted practically.
None of them practically being static, all
of them are shifting.
So the question is,
how this is possible and what is the mechanism
or what is the code behind it that is practically
drifting this individual backgrounds without
mentioning any of these
positions over here.
So this is the question of the day you have
to solve this question and you have to comment
us back with the result, with the answer you
have
found.
Write us back with the comment and if you
have any kind of question on this tutorial
or regarding any of the previous ones then
you can comment ask any time
and we will be communicating with you within
next 2 days or 48 hours.
and another thing, we need to mention this
hack codes...
And always standard syntax comes at
the end.
now just press control+s, get back to your
project and and reload now you can see that
this animation is moving on.
So this is all for this tutorial.
Hope
you have liked or tutorial.
If you have liked our tutorial then do not
hesitate to hit that red subscribe button.
Hope to see you guys in the next tutorial,
till
then, bye.
