Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
by
Lessons:26Length:3.5 hours
  • Overview
  • Transcript

3.1 Downloading Wow.js

Hello, and welcome back to Scroll Events Made Easy. In this lesson, we're gonna get started on our second project using wow.js. Which is another very handy JavaScript framework for creating scroll events. And, this particular framework specializes in creating animations for items once they scroll onto the screen. So, if we were to refresh this main page for wow.js, which, by the way, is not a beautiful sight. But it has a great framework attached to it. So that's okay, so let's refresh that page, and we'll see some animations happen right away. But, as we scroll down, we can see that all the other animations happen once these items are scrolled onto the screen. And, you might be surprised to find out that we can do all of this without writing any JavaScript code ourselves. So, if we scroll down to the bottom and refresh it, you'll see that these items will animate as they come onto the screen the other direction as well. So, it didn't matter which direction you're scrolling, these animations will happen as soon as the objects associated with them are scrolled onto the screen. And as you can see here, the wow.js framework works really well with Animate.css, so we're gonna be downloading that as well. So, let's click on Animate.css first, and then let's download it, so we can click on the download link and it downloads it there for us. I'm gonna show that in Finder. And then, we're going to create a new folder. We're not gonna copy the site04 folder, cuz we're starting with a whole new site here, so I'm just gonna create a new folder here. And, we'll call it site05 and this will be the start of our wow.js file. And, let's create a new folder inside that called css and we'll drag that folder into site05. I'll also create a new folder called js for JavaScript. We'll drag that into site05. And then, we'll grab animate.css and drag that into our css folder, and there we go. So, now let's download wow.js. We'll go back to the wow website. And again, we'll put the link to this in our course notes. But, once we get to the wow.js website, you'll see there's a link for a live demo. Which basically just has more examples of that working. I'm gonna go back and I want that demo, so I'll close that. And, what I want to click on is the github link here, and once we get to github, you'll see, and it's kind of hard to find if you don't know where to look. But, in the upper right hand corner of this list of files here, you'll see this button for download zip, so we'll click on that, it will download that zip file and I'll open that up in Finder, double click to extract it or if you're using a PC, you would right click it and click on extract. And, you'll see there's several different files here. There's some CSS for the demo and if we double click on demo.html, you'll see there's a number of different demo animations. We don't really need to go through that. But, let's go back to Finder, and under the dist folder or distribution folder, we see our JavaScript files. We have the wow.js and wow.min.js. So, all we really need for this course is the min.js. And I want to encourage you to download all of this yourself, so that you'll have that license, you'll have the readme file and all the good stuff that comes with it. But, in the interest of saving space, I'm just gonna grab this wow.min.js file and drag that into my js folder under site05. Let's make sure it goes into that folder. There we go. And then, we're a lot closer to getting started. So now, in our site05 folder, let's just grab that and drag it down to Brackets. And we'll right-click and create a new file and we'll call it index.html. And that file, we'll create our basic setup here. And then inside our body, we need to link to our CSS file, animate.css, and our JavaScript file, wow.min.js. So, we're gonna create a link tag, and we're gonna set the href attribute=css/animate.css. We can set the relationship or rel, excuse me, to style sheet and that should do it for that. And then, we can create a script tag if we can spell it right and we'll set the source for that equal to, let's put our opening quotation mark there, js/wow.min.js, and then we'll create our closing script tag after that. So, now we've got everything we need set up on our page, and in the next lesson we can start building our site. So, let's save that and we'll move on with the next lesson. Thank you for watching.

Back to the top