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

2.2 Setting Up the Site

Parallax.js is a JavaScript library which makes parallax backgrounds extremely easy to implement. In this lesson, you will download the library and prepare it for use on your system. Also, you will be pointing to the jQuery and Bootstrap frameworks for extra layout and functionality help.

Related Links

2.2 Setting Up the Site

Hello, and welcome back to Scroll Events Made Easy. In this lesson, before we get started on our first project, I want to download the files that we're gonna need to use for this project. So obviously we're gonna need Parallax.js because that's the main framework that we're gonna be talking about here. This is the framework that's going to allow us to very easily create these parallax backgrounds. But in order for that to work, we're also gonna need jQuery, which is a JavaScript library which just makes some JavaScript chores a little bit easier to do. And we're also gonna be using Bootstrap to help style our page and lay out our page more easily. Bootstrap has some nice CSS styles already laid out for us that make it really easy to create rows and columns of information and to lay out the page. So we're gonna be using all three of these items, all three of these frameworks if you will. And we're gonna start with Parallax.js. So I'm gonna go ahead and click on the download link for Parallax. And you'll see it downloads that as a ZIP file. We can show that in Finder. And double click on it if you're using a Mac to unzip it or right click and extract if you're using a PC. But inside that folder we have a couple of very easy to understand files here and the one we want to focus on is parallax.min.js, that's the minified version of our JavaScript file, and if you're familiar with JavaScript and you wanna looked through and see the interworkings of Parallax.js. You can open up the regular parallax.js file and that's the non-minified version, excuse me, so that one will be a little easier to read. But if you just wanna follow along here, if you don't care about JavaScript and you just want to make this work, all you need is the parallax.min.js file. Now with your course you should have access to a project files folder. And in that project files folders, I'm gonna create a new folder called site01. Inside the site01 folder, I'm gonna grab, first of all let's create another folder inside that. I'm gonna click on that and I'm gonna hit Shift+Cmd+N to create a new folder, and I'm gonna call this new folder js for JavaScript. And I'm gonna drag that inside the site01 folder, and then inside the JavaScript folder I'm gonna grab this parallax.min.js and I'm gonna drag that. Right on top of that JavaScript folder, so we should be able to see that there now. Very good. Now we also need jQuery and Bootstrap, but we're gonna use the CDN to point to jQuery and Bootstrap. We have versions online that we can point to that are already hosted elsewhere. So we don't have to download jQuery, we don't have to download Bootstrap. We can just point to the CDN version. So if you go to code.jQuery.com then you can scroll down and see a few different versions. I wanna look at the uncompressed version of 1.12.0. The most recent version, 2.2.0, is not supported by anything less than IE 9, so I'm gonna go down to the 1.12.0 version. And if we hover over the uncompressed, we can see our link at the bottom, links to code.jquery.com and if we just click on that we see a plain text file. Now we could download this text file to our computer and use it that way. However, I just want to link to it from our website. So the way we're gonna do this is we're just gonna right click on the link that says uncompressed. And I want to copy link address. Then, let's go ahead and create our website. So, in our project files folder I'm gonna grab the site01 folder. And I'm gonna drag that folder down onto my brackets icon. I'm gonna be using the brackets text editor for this course. It's a very easy to use text editor that allows you to open entire folders at once, but you can use any plain text editor you want to. I'm definitely not gonna force this one on you, but here we have site01 open now and we can right-click and create a new file and I'm gonna call index.html. And then we can enter in our basic HTML information, so we have our doctype, and then we have our opening and closing HTML tags or opening and closing head tag. We might even have a title in here. That says parallax.js, whatever you want the title to say. And then under the head, we'll have the body of our document, and we're good to go. So now we just need to link to a few items to get this working right. First of all, we're gonna link to jQuery by creating a script tag, and we're gonna set the source or src attribute of that script tag equal to, and I'm just gonna Cmd+V, paste that URL that I copied from code.jquery.com. So this will point to the JavaScript file, located at code.jquery.com and then we can close that script tag. Then if we go back to our browser and navigate over to getbootstrap.com and then click on the getting started link and you'll see that Bootstrap 4 is coming but right now we're gonna be using Bootstrap 3. And if we scroll down a little bit we can see a link for the Bootstrap CDN. I'm gonna grab all of the content inside this text field here and copy that. Jump back over to brackets, and then underneath our script tag for jQuery we're gonna hit Enter and then Cmd+V to paste that. Now we don't really need this center option here, this optional theme, I'm not gonna be using the Bootstrap themes, I'm just gonna be using the base Bootstrap. So I'm gonna delete that optional theme in the middle but we still have the CSS here and the JavaScript. We need both of those. I'm gonna grab these and just tab them over. So it's a little easier to read everything. And then finally we wanna point to our parallax files. I'm gonna hit End to go to the end of that line, and then Enter to go to the next line. And now we're going to point to our paralex.js file. So we can expand this folder out to see that file again, in case we've forgotten what we called it. And, we're gonna create a new script tag, and we're gonna set our src="js/parallax.min.js" and then we can close out that script tag. So that give us all that we need to get started with our first project and we'll do that in the next lesson. Let's save our file and I'll see you then.

Back to the top