In this tutorial, we are going to know about how to create this smooth transition effect
on the dropdown navigation menu list items and on the other hand we will be
witnessing how to create this kind of animation effect on individual list items of the second
unordered list.
Hello and welcome to another new episode of learning
simplified.
In this tutorial we are going to witness how to create this smooth transitional effects
individual list items of the second order list item of the
unordered list and on the other hand we will be creating some more instant text and background
effects as we can see over here.
Now let's hop in 2 our tutorial.
We have created this index.HTML page and this
stylesheet.css page.
Now, in this style sheet.
CSS so far I have created this navigation menu and I have created and
index.
HTML and inside this page I have created all those sort of things like this list items,
this is the first order list, and here goes this second order list and
if we observe the output of the thing so far we did then we may see, we may witness that
this kind of appearance is seen.
So this is the thing that we are about to organize and decorate.
Now let's get back to our stylesheet.
CSS.
Although those have been coded over here, all those things for defining the first order
list over here.
you see, these are the first order list item, all these things are the first order list
items.
In this case I have taken a container class name.
This is the container class name that has been created
over here which has a width of 1000px, its height is auto, I have kept the height at
Auto condition.
the background of it is pure black.
The margin is 50px auto, that means it will leave a gap of 50px from the top.
So I am customizing this unordered list that has been created over here.
Here goes the unordered list and I have provided list style to none.
That means there won't be any bulleted text formats and I have kept this position to relative
and and uplifted the Z index value to 1000.
Then I have customized the list item I have kept this list item floating left.
The margin for each individual list items should be 0 2px, leaving a 2px gap from both
left and right.
And I have kept the position relative again in case of individual list items for the first
order list.
Then I have created an anchor tag over here under this list
item.
Now up to this part, its ok and alright, but we have already introduced second order unordered
list item inside this first order list item.
but this not yet been customized, so this is what we need to
customize first.
So that is why we are getting back to our code and here...
We are customizing at...
We have previously made the position as relative, so this time
I am making the position absolute.
Why it is 180px?
Because we have placed these individual list items anchor tags as
width 180px.
And the same exact thing we are wanting over here, this will be having a total of 180px,
such that it comes right beneath individual list items .
That is why we have restricted we have confined this width to 180px.
Another important issue, place this height, restrict this height to 0px.
We have placed this height as 0px, and on transition condition,
create syntax here...
Now the question is what will be happening over here?
Whenever we are inserting our mouse in, we see, whenever we are hovering our Mouse
inside this particular service box, we can see here that in this particular case, a dropdown
list is descending down.That means there wasn't any height in the previous
case but on mouse hovering it is descending down to a particular height as we can witness
over here.
So this is the thing that we are about to do over here.
Now, we have placed this height to 0px, so up to this far if we get back to our project
and reload, now we can see that already there's a drop down list which has
been appeared over here.
Let's make this hover action.
So all we are doing here.... another thing that we have to provide over here is this
one - overflow hidden.
All we need to do we need to mention the nature of this animation so I am providing here ease...
Now if we just get back to our project and reload, now we can see
that on Mouse hovering a particular drop down list is descending down.
And why this height is 200px?
We have provided 5 list items here in the second order unordered
list, and another thing we have provided a total of line height of 40px.
This is the line height which has a total height of 40px, that means 5 multiplied by
40 equals to 200px.
That is why we have provided this height to 200px.
And this is what it is executing right now.
It is just dropping down to 200 px, showing all the
list items inside this item.
But you see that on Mouse hovering on others there's no such drop down list cause we never
mentioned any kind of dropdown list into this segment and that is why the only part which
is executing this kind of animation is this services segment which has a second order
unordered list to come in action.
Now the second thing is, we need to customize all these things, on Mouse hovering on this
individual list items these backgrounds will be changed and the colours of
this text elements those will be changed over here.
So what we are doing, we are now getting back over here, first of all provide this background
colour for say I am providing this yellow colour over here.
On Mouse hovering these things will be executed, so if you just reload now if we just come
below and we can see that the background colour is also getting changed,
and you want to change the font colours.
So all you need to do you need to get back to your project change and change the
font colour to red, suppose, I am changing this font colour to red, and we can see that
this thing is happening but this is also without animation.
So we need to provide some animation over here.....
Get back to your project and reload and we can see that there is a transitional effect
which is going on for one second for all and the things are getting changed.
And another thing this is the last thing of this tutorial, now we are providing another
kind of animation nature which is known as cubic bezier.
This is practically a cubic bezier, cubic, that means there will be 4 points.
Among these Four Points the position of two points are always
static which is 0 0 condition and 1 1 condition.
That is why the highest value of cubic bezier is 1 and the lowest value always remains to
0.
So the rest of the two points, that means the X1 and x2 points on
x axis and Y1 and Y2 points on y axis should be determined here.
Now this is practically very difficult task to observe to
determine the total or actual amount of this cubic-bezier, but thanks to lea Verou, scholar
of Massachusetts University of Technology or MIT, she is a PhD scholar
and she has determined a new technique to determine the cubic-bezier valuation.
so if we just get here, we can see that this is the website which is been developed
by lea Verou, here she is, lea Verou, and she has created this website where we will
determine the actual coordination for these points, these are the two points
that we were talking about this actually determines what kind of animation we will be observing
over here.
These are known as handlers.
If you just extend this Handler if you change the position of these
Handlers, you may see that this valuations are also getting changed over here.
You see now on changing the position of these handlers, X1 and X2 points valuations
are getting changed here.
Now if you want to change the position of Y1 and Y2 coordination you need to hold this
thing and the last of these two values those are
also getting changed.
Let's suppose that you want as on this case and here goes the value it has already been
calculated if it has already calculated over here.
All you need to know now you just go to save, and you see that here comes the valuation
in this popup dialog box.
So all you need to do you need to copy this valuation.
Now get back to your project, and over here you just paste it down.
Now just press control + S and get back to your project and reload, if you just get down
to this individual list items you may see that the same animation that the same cubic-bezier
properties are visible here.
For say you are just increasing this time duration to make it proper and and we are
creating another kind of animation technique if you compare between these two
valuation just go to preview and compare and press the button and you can see this kind
of animation will be happening here.
So this is what we are doing we can see that this kind of animation is happening.
The red box here is the animation effect that you can see is happening in to your web browser
into your project.
So this is what we are going to take.
Press control + s, get back to your project and reload.
Now you see?
It is first starting at a faster speed and then it is
getting slower, here.
So this is how you will be determining the cubic bezier method.
So this is what we are going to know, this is what we are going to learn from
today's tutorial as we can see that the background as well as the colour is getting changed and
it is getting changed in a cubic bezier method, it has some
particular values that can be determined using Lea Verou's website yes we can see this is
the curve for Linear, sorry for Ease, this is the curve for Linear,
ease in, ease out, ease-in-out.
now, this is what we can do, the link is provided in the description below you may take the
advantage of determining the values of a cubic bezier with the aid of her site.
We may observe that here comes a slight mismatch in width, so all we need to do...
So we can see that the mismatch has been solved, it's been fixed over here.
So I hope that you have like this tutorial.
If you have liked our tutorial then please do not hesitate to hit that red subscribe
button down below.
And this is the last of the segment of these animation techniques.
In the next tutorial we are going to complete our project that we were
practically working on.
This was the project actually that you were working previously.
in the next tutorial what we are going to learn we are practically going to
concentrate on this item and we are going to make a customized form field as we can
see.
Hope to see you guys in the next tutorial.
Till then, bye.
For more infomation >> Instagram BOT | Auto comment, Like, Follow, Unfollow | - Duration: 6:34. 
For more infomation >> Щенячий патруль новые серии БОЛЬШОЕ ЯЙЦО Киндер Сюрприз Мультики про игрушки Щенячий патруль Kinder - Duration: 6:20. 
For more infomation >> RED BALL 4 RED BALL VS. ZOMBIES #28 cartoon game for kids RED BALL ATTACKED ZOMBIES - Duration: 7:15. 
Không có nhận xét nào:
Đăng nhận xét