Name: Build Thanos Snap Effect With JavaScript Tutorial
Uploaded: 2020-03-28T16:47:07.000Z
Duration: 12 min 41 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Adverbs of degree

I don't have long before he finds me guys, but I really have to show you this amazing fan knows No, no, no, I'm not gonna Why getting disintegrated?

Adverbs of manner

All we need to do is click and the cat would disappear.

And to do this, it only takes about 40 lines of code, so let's jump right into it.

The first thing that we need to do is we haven't index dot html file, which is going to contain our image.

I also have all the different script tags and Java script that we need for a project already downloaded.

So the main things we're going to need HTML to canvas, which will allow us to convert an HTML element to a canvas element pretty self explanatory and then disintegrate dot Js, which will allow us to take a canvass element and break it apart into a bunch of small pieces, which gives you the disintegration effect.

I also have a style sheet here and a script tag linked to so we can write our custom, JavaScript and our customs.

Now, the first thing that we want to do is actually create the did that's going to contain our image.

We're gonna give it an I D, which is just going to be image so we can reference this later and we can close that off.

That's all we need to do for now could save that and jump indoor styles that CSS inside of here.

We first want to select the body and just get rid of all the margin and patting.

That way our image is going to go up all the way to the sides of our screen, and then we can select that image that we have and all we want to do here is we want to set the with 2 100 view.

It's we just want to take up the entire screen.

We also want to do the same thing for the height, but we want to use view height instead.

We also want to set that background image, and I already have my image selected and downloaded.

You can just use any image that you want, but this image will be available and to get every building to blow and it's just called cat dot jpeg.

Then what I want to do is I want to change background size here to be covered this way.

And I want to set the background position to be center just so that it's going to show the cat in the middle.

And if we saved that, open it up using live server.

So just right click on her index dot html open with Live Server and we'll see it open up over here.

And of course, when we click, it's not going to do anything.

But that's perfectly OK now, in order to get started with the disintegration using disintegrated dot Js were to go back to our index dot html.

We need to add in a class here a data attribute which is going to be data disk, which stands for disintegration type.

This is just going to allow us to make those disintegration particles and hook it up with the disintegrate dot Js library.

Now we can jump into the script ah Js and start writing the code here.

First thing we need to do is we need to use the disintegrate Library.

And we want to say dot in it this is just going to get things started and working for us that we can actually use the disintegrate library.

Then after that, we want to get our elements were going to say document, get element by i.

If you remember, we want to add an event listener because we want to listen for Whenever we click on that event, we want to do something.

So we're just going to take that, create a function here.

Let's make our screen a little bit larger.

And the first thing that we want to do is we want to get the object that we're going to disintegrate.

So we're going to say this object, how are you gonna set this equal to disintegrate?

Died Get this object just like that and we want to just pass it in the element.

So in our case, e dot target is just going to be this image element here.

Then, once we have that image that we want to destroy.

And we just want to pass it in that object just like that and that's all we need to do.

And as you see, when we click over here, it's going to disappear.

But we haven't ended showing up behind it because the image actually doesn't disappear.

So, what we want to do as we wanna target that original image and we just want to say we live groups just from if and now if we say that and click use, that image disappears and we get the nice particle effect.

But as you could see, I refresh here this particle effect is not at all what Banos is effect looks like.

So we need to create our own custom particle effect in order to make it look exactly as we want it to.

So in order to do that, we need to just create a variable.

We want to set it equal to a function, and this function is going to be all the code that we need to do to make our actual particles move around properly.

So this function right here is going to be cold for every single particle that gets created when we click on our screen over here.

So when we click every single one of those little particles that gets created, this function is going to be called once for each one of them.

There's also a this dot draw properties, so this dot draw If I can spell that properly.

Here we go this dot draw, and we need to set this equal to a function.

Here we go and this dot draw function is going to get called for essentially every single tick that the particle exists.

So she's gonna get called over and over and over again.

And this is where we can change the values of that particle in order to make it move and disappear.

The 1st 1 is the context is just the canvas context, and the next one is the percent complete.

So we know how want far along we are with our animation.

Also, there's a few properties that we need to set in this function.

The 1st 1 is this dot animation, animation duration.

And this just says how long in milliseconds the animation will last in our case will do 1.5 seconds.

We also need to set the name of this animation.

So we're gonna call this vanita snap this way, we can reference it later for our actual animation.

Again, this is going to have a couple other properties which are the start X and the start.

But we don't need to set those Those are already set by each individual particle.

When it comes apart of the actual world, soon we click.

As soon as that happens, all of the particles will get their own X and Y position already set for him.

So let's just jump down here into our actual draw method and see what we want to do.

The first thing we want to do is you want to actually start drawing, so we're going to say context dot Begin half.

This is going to allow us to start drawing our rectangles that we're going to create on our screen, and then we want to use context dot Phil Recht and this will allow us to create a rectangle.

And we need to put the dimensions of the rectangle in here as well as the start and end position.

So we know that we have this stops start X, which is going to be the start position, and we have a size that we want to use.

So we're just gonna say this stop size and divided by two and this is going to be our start position.

When it did the exact same thing for Wiesel said, it start wide and again.

These start wide and start X properties are already set as soon as the particles created.

We could do this dot size again and divide it by two.

And then lastly, we could just say this that size is how wide we want it to be.

And this dot size is how totally wanted to be.

We need to create this dot sized variable because it doesn't exist yet.

Subtitles ListPlay Video

Build Thanos Snap Effect With JavaScript Tutorial

context

properly

negative

exact