WEBVTT

00:00:07.020 --> 00:00:13.590
It this video we're going to learn how to create animations and visual effects using equerry.

00:00:13.800 --> 00:00:17.340
We're going to be using the same source code as in the previous file.

00:00:17.490 --> 00:00:26.130
Again the only thing is we resets the Querrey script and also we deleted all the buttons in the previous

00:00:26.130 --> 00:00:27.060
script.

00:00:27.630 --> 00:00:29.270
OK.

00:00:29.520 --> 00:00:37.340
So first of all we'd like to introduce the fade in fade out concept.

00:00:37.560 --> 00:00:42.510
Basically we can make a certain ASML elements fade out.

00:00:42.540 --> 00:00:50.850
So rather than making its height we can hide it in slow motion and that's what fade outs means.

00:00:51.070 --> 00:00:52.550
The same thing for fade in.

00:00:52.560 --> 00:00:59.280
So rather than showing the elements using the show method we can use another method that will just fade

00:00:59.340 --> 00:01:01.950
in the elements in slow motion.

00:01:02.430 --> 00:01:03.020
All right.

00:01:03.300 --> 00:01:06.450
So first this creates a button just before Facebook

00:01:12.000 --> 00:01:27.530
and we want this person to fade out Facebook and give us an I.D. fade out Facebook.

00:01:27.530 --> 00:01:28.220
All right.

00:01:28.500 --> 00:01:33.730
So would you be able to click on the button and make Facebook fadeout.

00:01:33.930 --> 00:01:40.350
So let's access the person using its ID.

00:01:42.730 --> 00:01:47.930
OK Faid it's Facebook.

00:01:49.560 --> 00:01:50.340
OK.

00:01:50.490 --> 00:01:52.470
The event is click

00:01:56.140 --> 00:01:58.110
and the function to execute

00:02:00.930 --> 00:02:03.890
is going to be following.

00:02:03.900 --> 00:02:08.830
So we need to statesman's where we access the Facebook.

00:02:09.170 --> 00:02:09.850
OK.

00:02:10.410 --> 00:02:11.400
Using ID

00:02:16.620 --> 00:02:29.800
and then we want to make this device fade out the method we need to use for that is fadeout.

00:02:29.880 --> 00:02:32.800
Let's try this without any images and see what we get.

00:02:32.820 --> 00:02:35.800
So if you click on the button so we can see that's the diff.

00:02:35.850 --> 00:02:37.190
Just pay it out.

00:02:37.200 --> 00:02:45.370
So it's exactly the same as the hide method which is changing the display property to none.

00:02:46.470 --> 00:02:49.130
But this time we're just doing it in slow motion.

00:02:49.720 --> 00:02:50.130
OK.

00:02:50.280 --> 00:02:53.910
So we can add another we can other Paromita inside this method.

00:02:53.910 --> 00:03:09.030
So it is trying for example slow you see you can see it as the fade out a slow destroy fast I can see

00:03:09.030 --> 00:03:10.740
that it is faster.

00:03:10.770 --> 00:03:16.090
Also we can try a duration in milliseconds.

00:03:16.290 --> 00:03:20.730
So this is just saying how long it will take for the elements to fade out.

00:03:21.000 --> 00:03:22.860
OK.

00:03:22.890 --> 00:03:30.510
And also we can add another promise which is going to be a callback function so we can define a function

00:03:30.510 --> 00:03:36.300
in the second parameter which will tell the browser what happens once the elements has faded out.

00:03:36.300 --> 00:03:45.600
So let's try something like this to destroy a function that will do a window alerts

00:03:48.290 --> 00:03:48.820
Jolles.

00:03:48.840 --> 00:03:55.210
For example try and see this video now.

00:03:55.830 --> 00:03:59.920
And when it's done we can see that the function is executed.

00:04:00.240 --> 00:04:01.110
OK.

00:04:01.440 --> 00:04:05.040
So that's how the method of fade out works.

00:04:05.040 --> 00:04:08.080
So this time it wants Facebook to fade in.

00:04:08.190 --> 00:04:08.710
OK.

00:04:09.120 --> 00:04:12.210
So let's create a puzzle for us.

00:04:12.210 --> 00:04:16.330
So the idea is going to be fate in Facebook.

00:04:16.770 --> 00:04:17.400
OK.

00:04:17.550 --> 00:04:23.960
Fade in and the code is going to be a little bit difference.

00:04:24.150 --> 00:04:26.340
So we're just going to copy the same code

00:04:29.030 --> 00:04:32.400
and this time we're accessing the fade in button.

00:04:32.520 --> 00:04:36.190
So the event is still clicking OK.

00:04:36.550 --> 00:04:36.880
And

00:04:40.850 --> 00:04:43.280
and function goes there.

00:04:44.230 --> 00:04:49.320
So basically the method we're going to be using this time is going to be phased in.

00:04:49.500 --> 00:04:49.870
OK.

00:04:49.960 --> 00:04:53.110
So fade in.

00:04:53.140 --> 00:04:58.390
So again it's the usage is exactly similar to fade out.

00:04:58.390 --> 00:05:00.700
We can use it without parameters.

00:05:00.790 --> 00:05:03.970
So if we make Facebook fadeout first.

00:05:04.220 --> 00:05:06.180
OK.

00:05:06.670 --> 00:05:09.740
So we of course paid in Facebook there.

00:05:10.020 --> 00:05:10.810
OK.

00:05:10.960 --> 00:05:14.360
So let's try again so we make Facebook fade out.

00:05:14.410 --> 00:05:15.320
OK.

00:05:15.520 --> 00:05:19.800
And then if we click on vate and we can see Facebook fading.

00:05:19.810 --> 00:05:20.480
All right.

00:05:20.680 --> 00:05:24.080
So that's how we use the fade out and fade in functions.

00:05:24.130 --> 00:05:30.590
You can try on your own to add other just like we did for the fade out method.

00:05:30.680 --> 00:05:34.250
I guess we give you exactly the same same stuff.

00:05:34.480 --> 00:05:34.920
OK.

00:05:35.140 --> 00:05:38.560
Now we going to create another button.

00:05:38.710 --> 00:05:44.240
So we want to have a button that will do both the fade in and fade out.

00:05:44.400 --> 00:05:45.070
OK.

00:05:45.280 --> 00:05:48.010
So you can guess what the method is going to be this time.

00:05:48.010 --> 00:05:50.340
It's going to be fade Tuggle.

00:05:51.010 --> 00:05:51.680
OK.

00:05:51.940 --> 00:05:55.320
So let's let's try it.

00:05:56.050 --> 00:06:00.770
So basically is have a third button first.

00:06:00.910 --> 00:06:08.100
This give us an idea of Faid toggle.

00:06:08.930 --> 00:06:10.690
OK.

00:06:10.760 --> 00:06:14.770
So some text the fade toggle and

00:06:18.760 --> 00:06:25.180
this time if you access the the button using its ID.

00:06:25.240 --> 00:06:27.090
So it's going to be fate.

00:06:27.980 --> 00:06:34.170
Toggle eventis click accessing Facebook and we using the fake toggle method.

00:06:35.000 --> 00:06:37.930
OK.

00:06:38.710 --> 00:06:44.070
We can try to use one barometer showing the duration of the animation.

00:06:44.140 --> 00:06:51.760
So if we click on faith well OK if you click again you can see that Facebook comes back.

00:06:51.760 --> 00:06:52.770
All right.

00:06:53.580 --> 00:06:54.190
OK.

00:06:54.730 --> 00:06:57.700
So we can apply this to all this.

00:06:57.700 --> 00:07:04.700
So let's try to apply this to Apple and Microsoft as well within the same click.

00:07:04.930 --> 00:07:05.750
So let's

00:07:11.290 --> 00:07:21.640
say Apple will have to go with 2000 really seconds and Microsoft has said that to three thousand for

00:07:21.640 --> 00:07:24.890
example and they see the effects.

00:07:24.900 --> 00:07:30.590
So if you click there you can see the effects and click again as you are.

00:07:30.600 --> 00:07:32.680
They all come back.

00:07:32.770 --> 00:07:34.260
All right.

00:07:35.490 --> 00:07:35.860
All right.

00:07:35.860 --> 00:07:39.160
So now we're going to move to something else.

00:07:39.160 --> 00:07:49.180
We're going to move to another method that will help us create an animation using properties of the

00:07:49.330 --> 00:07:50.780
elements.

00:07:50.860 --> 00:08:01.090
So for example we can make a certain drive to get animated and move both the way from a certain value

00:08:01.090 --> 00:08:02.180
to another value.

00:08:02.440 --> 00:08:06.520
We can change the background color we can change the height.

00:08:06.850 --> 00:08:08.500
We can do the apostasy as well.

00:08:08.500 --> 00:08:09.010
All right.

00:08:09.100 --> 00:08:11.860
So let's have a look at one example.

00:08:12.130 --> 00:08:14.280
First this creates a button for that.

00:08:14.290 --> 00:08:20.180
So we're going to create a and animates button.

00:08:20.530 --> 00:08:25.990
So the idea is going to be an inmate put some text on teammates.

00:08:26.510 --> 00:08:36.150
OK so let's apply this to the Facebook differences.

00:08:36.190 --> 00:08:42.590
First of all we're accessing the animates button using its ID.

00:08:43.570 --> 00:08:43.900
And

00:08:47.020 --> 00:08:49.810
the event is click.

00:08:49.810 --> 00:08:57.080
All right we are defining a function.

00:08:57.170 --> 00:08:58.410
All right.

00:08:58.780 --> 00:09:04.780
So we can access the Facebook Dave.

00:09:05.070 --> 00:09:06.170
All right.

00:09:06.670 --> 00:09:08.020
Using its ID

00:09:12.700 --> 00:09:15.020
and then we using a new method.

00:09:15.040 --> 00:09:17.070
It's going to be ultimate's.

00:09:17.840 --> 00:09:18.590
OK.

00:09:18.980 --> 00:09:27.070
So inside the promises of the method we're going to need to put all the properties that we want to change

00:09:28.370 --> 00:09:31.040
and we need curly brackets.

00:09:31.210 --> 00:09:35.800
We're going to put all the properties in and we can try to

00:09:38.770 --> 00:09:42.660
set the width to a new value.

00:09:42.660 --> 00:09:50.310
So for example 200 pixels we can change the heights as well

00:09:53.560 --> 00:09:54.490
as Troy

00:10:01.380 --> 00:10:06.800
set the height to 50 for example.

00:10:07.040 --> 00:10:07.820
OK.

00:10:07.880 --> 00:10:09.830
And also we can change the

00:10:12.920 --> 00:10:13.670
apostasy

00:10:17.120 --> 00:10:20.470
to points of life.

00:10:20.470 --> 00:10:24.390
Let's try this and say OK.

00:10:24.830 --> 00:10:34.160
So just to make the animation smooth we get to set the margin of paragraphs

00:10:40.460 --> 00:10:42.510
to zero.

00:10:43.680 --> 00:10:46.500
OK.

00:10:46.760 --> 00:10:48.340
Let's see.

00:10:49.200 --> 00:10:49.640
OK.

00:10:49.870 --> 00:10:53.880
So you can see how the animation works.

00:10:53.920 --> 00:10:55.460
All right.

00:10:56.660 --> 00:11:02.250
We can also add a duration for the animation so as a second barometer.

00:11:02.300 --> 00:11:07.300
So the first point I would say includes all the properties to change within curly brackets.

00:11:07.370 --> 00:11:17.200
And the second one we can say is the duration of the animation for try as you can see that's right.

00:11:17.770 --> 00:11:19.560
OK.

00:11:20.580 --> 00:11:27.740
Now let's try another example just common this one this time

00:11:31.160 --> 00:11:37.030
we can make the live go through several animations one by one.

00:11:37.330 --> 00:11:43.190
OK rather than having the same animation changing several properties we can change one property at a

00:11:43.190 --> 00:11:44.480
time.

00:11:44.720 --> 00:11:48.470
So let's do this again so.

00:11:48.730 --> 00:11:59.960
So are going to access the animates button first using its ID then event is click its

00:12:02.440 --> 00:12:06.380
function.

00:12:07.700 --> 00:12:10.120
He's going to be following.

00:12:10.440 --> 00:12:12.690
OK.

00:12:12.980 --> 00:12:14.890
So first let's access the Facebook.

00:12:24.960 --> 00:12:36.710
They use the animate function and this time let's change the width first.

00:12:38.200 --> 00:12:39.230
OK.

00:12:39.550 --> 00:12:43.420
Let's set it to 200 pixels.

00:12:43.630 --> 00:12:47.960
For example let's have a generation.

00:12:48.310 --> 00:12:51.140
Well colleges say slow.

00:12:52.170 --> 00:12:58.700
OK let's copy this duplicate this line of another animation where we change the height

00:13:01.730 --> 00:13:14.440
to 300 pixels and let's have another animation where we change the height again to 100.

00:13:16.340 --> 00:13:30.260
And finally we can changed the way to 300 for example.

00:13:30.280 --> 00:13:30.910
OK.

00:13:31.130 --> 00:13:31.920
So let's try this

00:13:36.380 --> 00:13:41.290
so we can see less each animation we run separately and one runs up to the other.

00:13:41.490 --> 00:13:42.270
OK.

00:13:42.620 --> 00:13:46.190
So we have a sequence of animations.

00:13:46.280 --> 00:13:51.120
There is a function we can use to delay a certain animation.

00:13:51.440 --> 00:13:53.090
It's the Deely method.

00:13:53.090 --> 00:14:00.820
So before the animate method we can just have a delay we can say which will lead a problem to that.

00:14:00.830 --> 00:14:11.310
So we just need to say how many milliseconds we can you want to delay the animation if we try that we

00:14:11.340 --> 00:14:14.750
can see the first animation second one third one.

00:14:14.750 --> 00:14:16.620
They all run.

00:14:17.520 --> 00:14:24.410
Then we have a delay to run the final animation because of the delay method.

00:14:24.420 --> 00:14:25.110
All right.

00:14:25.580 --> 00:14:32.120
So that's how we create effects animations using equerry