Set Up
So first of all this effect I thought was just html5 because a lot of different sites i found said that is all it takes. Too bad that isn't true It takes some jQuery to actually make it work right. So first make a main folder for your site like you usually would. Inside that folder you need a folder from the files you download here. Just click the download source files. It is mainly the js folder you will want from this folder if you want to do this tutorial. You can just copy and paste that folder into your site folder. then of course make the other folders you would usually make like "images" and "css". You can refer to my pic to make sure your site folder looks right. Like normal you make your main page named "index.html" and make a style sheet for your css and save it in the "css" folder.
The HTML
Ok so lets look at this. I tried to add notes so you could follow along. I know some of these bigger sections of code might be hard to read though so look at the end of this post and you can get my html and CSS if you want to see it a bit better. You start your html pretty averagely in the header the only thing is that you need to import all those lovely .js files we just put in your "js" folder. As you see on line 7 we link to a css sheet online called CSSReset. we do that becuase it gets rid of any default line widths font width anything like that. pretty much it gives us a very clean slate to work with in our styles. Then in line 9 we link our own style sheet that we have saved in the css folder in our sites main folder. If you look you can see I named mine "styleSheet.css".
After we link our style sheets we import the jQuery (which is technically javascript thus the .js in the end of every file name). we do this in lines 11,12,14,16,18. those lines are all linking to our .js files in that js folder. The tag starts with script to let it know you are about to give it some script to use. then you tell it the type you of script you are about to give it. in our case it is "text/javascript" which means it is a text file that is a javascript file. then we tell it the source or "src" in code language. This is just the location where it can find the text/javascript file we are telling it to look for. If we look at line 11 we are telling it to find a file online so we gave it the files url. In line 11 we have the file here in our js folder so we just tell it to look in the "js" folder and find a file named "js.js"in code language that looks like "js/js.js". lines 12,14,16, and 18 just repeat the proicess and tell it to find all the other files in the "js" folder.
Lets move onto the body of our page.
I hope that is readable, again I included notes. Here we go so the first thing i do in the body is I put my logo or really anything that I want to remain fixed to the browser window and not scroll with everything else. Examples of this would be navigation or logo. In my case for the sake of this tutorial Im focusing on just the parallax effect I'll do navigation in a parallax site in another tutorial. So I'm just going to put my logo here so that we have an example of something that stays fixed. I do that with the img tag but notice I give it a class "mainlogo" yours doesn't need to be named the same as mine but this name will be what we use to refer to it in our CSS when we get to styling it so name it something logical so you can remember what it is you are styling later. next I start a a div this div is going to contain everything I want on that first slide so I am going to give it the class of "slide" because in my CSS I'll give it some style rules that will apply to every slide. Then I give it an id of "slide1" I do this because later when I am doing my CSS I might want to give this slide some unique styles. I gave it the data-slide name of 1 and this will come in handy when I add navigation to this in my next tutorial. But for now lets just leave that in there and not worry about it. lastly I gave the div a cool effect called data-stellar-background-ratio this makes it so when we scroll the slide itself doesn't scroll quite as fast so that our parallax-ing objects will have time to do all their great movement before they hit the next slide. setting at .5 means we are going half the normal scroll speed.
Ok so inside our "slide1" div we have one more div this one is called "wrapper" and wrapper is where all our images are going to be stored that we want to parallax. mainly the wrapper div will serve as our way of making sure all our content remains in the middle of our page even when the users move their window size around. We'll make sure it does that once we get to our CSS. But for now lets put all our images in. Just like normal we start by opening the img tag and then giving it a src so that the html will know where the image file is. But then we add a little more to it and this is possible because in our header we linked those ".js" files. first we give the image what is called a "data-stellar-ratio" this tells the image how fast it should scroll. if we give it a decimal value like ".75" then it will scroll at only 75% of the speed it normally does but if we give it a value hire than 1 it will scroll faster than normal. For example if we give it a 3 as its value then it will scroll at 300% or 3 times as fast as normal. It is because we assign everything a different value in the data-stellar-ratio that we have the parallax effect. slower scrolling things will look farther away while faster things will look closer. Taking that into account make sure that in your objects stacking order the images further down the list go faster than the things at the beginning of your list or else you might run into problems where something is scrolling up faster but goes behind something scrolling slower and destroys your parallax depth effect. I did one slide with notes and then a second slide without notes so you can see a little better what your code might look like.
Finally after I closed my "wrapper" div I included some things that I wanted to just scroll normally with the slide with no parallax. I put a span where I would include the pages title and gave it the class "slideno" So that in my CSS I can stylize all the things that I want to keep with the page the same and add some continuity to the site. I then added a link that will in my later tutorial become a button that you can push to auto slide to the next page.
The CSS
So now we hit the css. here we will do things like make your page fill the browser, center your content, and position all of your content. Lets hit it one piece at a time
First the body. This is simple CSS it makes it so your page fills the browser window no matter the size which is really handy because people make their browsers all sorts of sizes.
Next I'm going to position the things that I want fixed to the browser. Remember in my html code I gave my Logo a class named "mainlogo"? well I use that same name here. The "." tells CSS that im about to stylize a class and the name "mainlogo" means anything that I named "mainlogo" in my html will get this same style. in this case only my logo image was given that class so it will only effect that one thing. So here I give it a fixed position and that snaps it to my browser so even if I scroll it doesn't care it will stay in the spot I tell it. In this case I told it to go 20 pixels from the top and 20 pixels from the right. I also gave ti a z-index of 1 because that will bring it on top of everything else. that way when I scroll down my content will never overlap my logo. That is especially good with navs cause you always want your nav to be on top.
Here we start to build the bones to our slides. First we customize the "slide" class so if we gave every slide we made the class of "slide" then this will apply to them all. Same applies when we customize our "wrapper" and our "slideno"classes if you look below. So in our "slide" class first we make it so our background- attachment is fixed. This is if you want your background of each slide to appear as if it isn't moving. Instead it just disappears behind the next slide kinda. If you want the background to move then make this absolute. then we specify how big we want the slide to be and to tell the truth I can't think of a time you wouldn't want it to fill the screen so I'm putting it at 100% because then the slide will always fill the window. We want this to be relative to give the wrapper something to base itself on when we position it. After that we give the slide a drop shadow just for effects for when we scroll onto the next page.
Next we have the wrapper. Remember when I said this will help us center our content on the page? well this is where that all happens. First we set the width and this is really where we set the width of the heart of our page. for example this blog is centered in your browser. if you stretch your browser the middle section will stay in the middle and stay nice and designed. If you shrink it then It still says centered and designed right? so we are going to do that to our content on the slides. First we set the width to 960 pixels. We do 960 because that will accommodate for even the small monitors out there. we then do 200 pixels for the height and really I just chose 200 even though you could mess with the height to see what happens. then I give it a margin of 0 and auto, this centers it on the page. Then I make it relative and now it will start basing itself off the slide and stay with the slide. nice huh?
Here we customize the "slideno" class. This is for all that stuff you want to stay perfectly with the slide like page names are a great example. the most important part of this code is the position. we make it absolute and then it will stick to the slide we put it in. Then we tell it where to put this content and it will stay on that part of the slide unaffected by all the rest of your content.
Slides
So here we get to positioning the images on your page. This is where if you came prepared with a good digital comp of what you wanted to make, it becomes pretty easy. First we tell it we are stylizing slide 1. In our html we told it which div holds all our slide1 info because we gave it an id of "slide1". I wanted to give it a good background texture so I made one in photoShop and put it in a folder named slide1 inside my images folder. I then used the background-image and gave it the location of my background. Remember I said in my .slide class that I wanted the backgrounds fixed so when I scroll this image wont move at all but it will still disappear behind the next slide as I scroll down. I then start positioning each image within the slide1 div. Notice I can adress them by telling it the number of the child I want to position. This means I have to remember which image came first second third and so on in my html. I make them absolute which means positioning them won't be effected by the other children. So If I put 0,0 for all of them they will all be right on top each other. Here I can refer to my digital comp and find out how many pixels everything is from the top or side that way I can know which values to put into here. I would recommend using the same convention. Here I was experimenting with basing some off of the bottom right and some off of the top left. but If you do all your positioning from the same point it won't be quite as confusing most the time.
Once you have done that to one slide you can repeat the process for each slide. Just remember to change the name of "slide1" to the name of your next slide which for me is "slide2" you can repeat that process 100 times and make 100 slides if you want all stacked ont op each other.
Final Things
First of all I want to repeat that I learned all of this from the excellent tutorial by Aaron Lumsden which again you can find here. And he explains many things in better detail. I also want to put a bit of a disclaimer. If you view these parallax sites in chrome or safari once the top of your image leaves the screen it disappears till you scroll back. in firefox however it works perfectly fine. Really you only notice it if you are using very tall images. I am currently searching for a way to fix that so I will post yet a third tutorial if I can find out how to fix that. I hope this helps anyone who might be struggling with making this kind of a site.
View My CSS here
View My Html here
No comments:
Post a Comment