by
Lessons:15Length:1.7 hours
Animated html5 page transitions 400x277
  • Overview
  • Transcript

2.2 The Starter Files

In this lesson I will walk you through the starting HTML, CSS, and JavaScript files that you will be using to build your animated transitions.

2.2 The Starter Files

Hello and welcome back, in this lesson, I'm gonna walk you through our starter site. I've already built out a basic website for you, and for all intents and purposes, it's done. We're not gonna add any more to the content or the design of this site. We're just gonna create some animations to go from one page to the next. Now in this course, we've only got two pages, we've got our Home page and we've got a Join page. The About, Shop, and Contact links there don't actually go anywhere. We're just gonna focus on these two pages, and you can build up the rest as a project, if you wish. And so the images you'll see on the side, which are just two or a few images, I suppose. I took all these images myself, I don't care what you do with them as long as you don't try to sell them. So they're yours to do with as you please. But this is the basic site design, so we've already got the site built out. We just need to create some animations and transitions. We've already talked about the kind of technologies we're gonna be using to do that. But I do wanna walk you through our starting site. And you'll notice I'm in the site01 folder looking at index.html. So as we build up this site, we're gonna have different versions of this folder. So the site01 folder is the one you wanna start with. It's the one that has the basic HTML and CSS that we need to start with. And I'm gonna drag over my code editor here, I'm using Visual Studio Code for this. You can use Brackets or whatever code editor you prefer to use, I'm gonna be using Visual Studio Code. And you'll notice, we have a main.js file, which is handling the hover effects on our menu right now. And we're gonna be doing some more in that main.js file. In fact, that's where most of our work is gonna be done. But right now, we have some JavaScript here, some jQuery that's animating our, what I'm calling the nav underline here, whenever we hover over it. So initially, we're setting the nav underline CSS, we're setting the left position and the width of that item initially right here. And then we have a couple of event listeners so that when we hover over a nav item, one of those links on the navigation bar, we're gonna run this function whenever we hover over. And then this function here, whenever we move our mouse cursor away from it. So when we move our mouse cursor away from one of these buttons, you'll see it just goes back to whatever the active button is. And in our HTML, if we open up index.html, here is our main header here, and our main nav inside that. And you'll see that whatever page we're on, and right now, it's the index.html page, we've given it a class of active. Then you'll notice also that all of these anchor tags within this nav menu have a class of transition-link. And what we're gonna do is, we're gonna take this transition-link class. And we're gonna use that to trigger the animations whenever we're gonna animate from one page to another. That way, if we have a link that doesn't have this class tied to it, then that link will just jump over to whatever page you're clicking on. But these transition links will actually trigger the animation. So I would encourage you to go through this HTML file. Go through the current styles.css and main.js JavaScript files and get familiar with the code there. And make sure that you understand everything that's going on in these files. You'll notice we have this registerEventListeners method. It's just a method I like to create and put all my event listeners inside that. And then at the very end of my JavaScript, I'll trigger that registerEventListeners function. That's just a pattern I like to use, so don't be confused by that, it's pretty straightforward. So again, I wanna encourage you to get familiar with all of these files. And once you're familiar with them, then go ahead and jump forward to the next lesson where we'll continue, thank you for watching.

Back to the top