Name: わずか12分で驚くべきページ遷移を構築する (Build Amazing Page Transitions In Only 12 Minutes)
Uploaded: 2021-01-14T10:20:24.000Z
Duration: 12 min 3 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

程度の副詞

Page transitions, that smooth animation that you get when you go from one page to another page that you almost never see on websites.

It really adds that extra little polish that makes a website go from good to amazing.

So today, in this video, I'm gonna show you how to really, really easily implement page transitions in your own website, which get started now, as always, on the left, I have visual studio code open to a completely blank project folder and on the right, I actually the documentation for the library we're gonna be using for these page transitions.

And the first thing we need to do is actually download this library we're gonna use.

The first way is actually using NPM to install it.

And the second way is to just include the script file from a CD in such a unpackaged dot com.

And the link is right here on the website.

I'm gonna show you how to do the m P m way.

So the first thing you need is note so you can check if you have knowed installed by going no Dash V and you should see your node version if you have it installed.

If not, I'll link a video on how to install note in the cards and the description.

The next thing you need to do is just run and P m I s W u P.

And that's going to install this swept library into a node Modules folder, which we're going to see on the left hand side.

We have knowed modules, and in here we have that library and inside the distribution fold folder, we have swept dot minn dot Js.

And this is the code that we want to include inside of our index dot html for our application.

So let's minimize all this out and create that index dot html.

You just come in here a type in index dot html and if you're in visual studio code, you can just type exclamation point hit, enter, and it's going to build out your boy or plain HTML for you.

And we could just put here our title is home.

The next thing we need to do is include that script tag, and you can copy it right here from the documentation which I have link in the description, or you can include it from node modules so we can just include the script tag.

We want the source here to be equal to note modules and then inside of there we have our swept library.

And inside of that, we have the distribution folder and we want the men ified version because that'll be the smallest possible file that we can import into our project.

And then since we're including this in the head, make sure you put the first so actually loads after your HTML was done loading.

Now that we have that done, the next thing we want to do is just to create some really, really basic HTML.

This isn't gonna be beautiful, but it's going to work just fine.

The first thing we're gonna want is some kind of navigation.

We're just gonna do a nun ordered list, and each one of these is gonna have a list item with an anchor tag.

And that anchor tag is going to be all of our navigation.

So the 1st 1 we're gonna have index dot html and something that's really important about this library is you need to make sure you put the Ford Slash in front of the girls that you're using for within your page that you want to have the animations for.

So it's really important to make sure you have that ford slash in here at the very beginning of your euro for your index dot html page, for example.

And here we're gonna have home when a cop is down two more times because we're gonna have a pricing page, which is just going to say pricing.

And lastly, we're gonna have an about Paige.

And this about page in here is just going to say about now.

After that, we're actually going to have our section which we're going to be animating in and out because our knave is the same one every page.

But we do want our main section down here to animate in and out.

So in order to make it animate, what we need to do is put an i d here and we want that I d to be swept.

We can actually change this later on if we need to inside of the Java script, but we're gonna leave it at the default of swamp, so make sure you put that as your i d.

The next thing that we want to have on here is our class, which is going to define our animation.

This library allows you to use CSS animations or JavaScript animations if you want.

But for this tutorial will u CSS animations because it's easier.

And CSS animations are really quite powerful, in my opinion.

So here you want to put a class and it has to start with transition.

And again, this is something that you can change in the configuration in the Java script.

If you want what we're gonna keep it the default.

And then we can just put whatever name you want.

For example, this is going to be a fade animation.

So we're gonna call it transition Fade now, inside of the main, we're just gonna put our content, which in our case, where you gonna put in a tch one and this is just going to say this is the home page just like that.

So now we have all over each team well done for our home page.

And if we have visual studio code and the Life server extension installed, we can right click this and open it with Life Server, and that should pop up over here.

And as you can see, we have our home page.

Our pricing page, which doesn't exist yet and are about Paige, would also does not exist yet.

We could just copy here index dot html pasted down two times the 1st 1 we want to call pricing mixture is spelled right.

Here we go and this one we want to call about and we only need to change a few things in each of these files in the about.

We just want to change here are titled Toe About, and we want to make sure we change this to say that this is the about Paige.

Then, instead of pricing, same exact thing changed the title to pricing and down here, change this to the pricing page.

Now we can check our links, and we can see the home page works, pricing page works and the about Paige works, so our entire application right now works, but we don't have any of those smooth transitions.

So we need to do is write the Java script.

We need to hook up this swept library with our application, and this is actually incredibly easy.

We'll just call it script dot Js and we only need one line in here.

And then single line we need to write is just create a variable called SWAC, and we want to set that equal to a new swept.

And just make sure this is a capitalist here because we're actually calling the new class.

And if we say that, that's all the Java script we need to write for this entire application, which is really powerful.

Thing we need to do is make sure we include that script tag so we can come in here Credit script tag.

Make sure it's after your import of the node modules swept library.

Make sure we put the differ keyword on it and we could set the source here to our script at J s.

And we just want to make sure we include this on all of our different html files.

So it's include this in art about here is well, it's just copy this in.

So now we have this included in all of our different HTML pages.

And now, if we go over to our application, you're gonna notice things aren't gonna work.

If we click on pricing, for example, it doesn't actually navigate us about Doesn't action navigate us, you see, are you're always changing.

What are actual content is staying exactly the same.

And that's because we need to implement the CSS animation to animate our content out and to animate our new content in.

So to do that, let's create a style sheet so we could just come in here.

This style is about CSS, and before we actually write this, let's make sure we include it into all of our different pages by just using a link tag here.

We want to set the atria of here equal to stiles dot CSS, and we want to make sure we set the rail, and this just needs to equal style sheet.

So our browser knows this is a style sheet and not something else was copy this to all of our different pages in the head.

And now we have our style sheet linked all over.

Index page is now in order to get started with CSS animations inside of here, we need to select that class we created, which is called Transition.

We need to do here in this transition fade classes defined what we want are content to look like after it fades in.

So in our case, we want to set capacity toe one whenever our content face in.

And in order to make a transition for your animation, you need to tell it how long you wanted to take in Our case will use 500 milliseconds, which is long enough That will be easy for us to see for the tutorial.

The next thing we need to do is that this library is actually going to add classes to the HTML tag of our document every single time that it animates something in and out.

And you can see those classes by going into the documentation.

And all we need to do here is click on the how it works section.

And as you can see, if I zoom this in so it's a little bit larger text.

You can see that it's going to add classes.