 
Today I’m going to demonstrate how to do a parallax...
...this is actually shockingly easy to do...
So, here I've got basically a stub of an HTML page
I have a ‘title’, a ‘head’ tag with an empty ‘style’ tag
...an empty ‘script’ tag
...and then in my ‘body’, I just have a headline here...
...and just so we have something to scroll through,
I’m just going to go over to lipsum.com, here...
and just copy some Lorem Ipsum text
and paste it in here
and paste some down here...
and then I’m going to put this image that I created
into a div tag in here
...so I'll just say ‘... I'm going to
create two ‘div’ tags here, one is going to be called
‘view’.
Inside that div, I’m going to create an image...
...so I’ll say <img src="img/feature.jpg"
...and I’ll give this an ‘id’ as well, of... "image”
...and that’s really all the HTML you need.
I’m going to add some styles for these...
for id ‘#view’ ...
...and id ‘#image’.
...just two styles.
So for the ‘view’, I’m going to set the ‘overflow’ to ‘hidden’,
I’m going to give it a ‘position’ of ‘relative’,
This just enables me to position the image within the
view using absolute positioning.
I'll say ‘height: 360px;‘
...and then for my image
...again, like I said, I’m going to do ‘position: absolute;’
...give it a width of ‘100%’ just so it covers the page...
...and then I'm going to give it a height that's larger
than the view height because we want to have
something to scroll through, so I’m going to say height...
600 pixels.
OK
so let’s go look at that...
We have our image here, some text here...
and we’re probably going to have to resize this window
a little bit to give us something to scroll through...
Actually, what I'll do is—I'll do a ‘min-height‘ here...
‘min-height: 1200px;’
and that way I'll be sure to have some scrolling room...
So, allright, all we need is some JavaScript.
I'm going to use jQuery
so I’m going to get a reference to my jQuery...
‘script src=“js/jquery.js’
So, in here, in my $('document').ready();
This is just standard jQuery document.ready stuff here
So, when the document’s ready, I’m going to get a...
reference to the image ID
This is so that it doesn’t have to constantly
re-instantiate that object every time I scroll
...and I’ll say ‘window.scroll()’
this’ll be a function
...and I’m just going to set some variables for the ‘offset’
and where we're going to position the image.
so i’ll say ‘var y = window.pageYOffset’
This is a standard JavaScript function
that’s part of JavaScript
and I’ll say ‘var p = y * 0.5’
which is the rate that we're going to scroll our image at
and all I have to is just...
...as the window’s scrolling...
...just change the CSS
and here’s what I’m going to change it to...
I’m going to use the ‘top’ attribute...
‘p’ times negative one...
...because we want negative values to happen...
...and then make this into a string by adding ‘px’
Alright, so let’s reload this...
...and as we scroll,
you can see the image scrolls at a different rate...
So, that’s it.
That’s all there is to it.
