[Instructor] Hey, so my friends at HAWRAFlaunched their brand new website last week.It's hawraf.com.The idea is you can scroll,I'm scrolling down the site,but the site scrolls to the side.You can do quite a lot of cool things on it.You can draw with this pencil as well,but I just wanted to talk very, very quicklyabout how you do this idea of side scrolling on the page.Now, in Sketch, I've quickly just made an image.This image is an SVG so it can stretch.It's 1,000 pixels wide by 250 pixels high.So basically the ratio is four to one,just to keep that in mind for a minute.Now, the way that we're gonna do this,I'm just gonna close this tab,is I've set my projects up already.Basically, it's a blank index.html.I've got my logo.svg here.What I'm gonna do is make this stretchto fill the whole screen and we're gonnaside scroll across this page instead.So in my style.css at the momentI've just got a body tag, background color is white.So very, very simple setup at the moment.Now the way that I'm gonna do thisis I'm just gonna put it in a div tag.So I'm just gonna write div tag.Now I don't need any content inside here.What I'm gonna do is put the logo as a backgroundso we can stretch it.So let's start with this.Now what we want to do is position this divin the top left corner.So I'm gonna position this using fixed position.Now the reason for fixed position iswe want to see the whole of this logowhenever we scroll any distance down the page.Now I'm gonna start this in the top corner,top zero pixels, left zero pixels.

Now the first thing we're gonna do isgive it a width and height just so we can see it.Now the width I'm gonna do is 1,000 pixelsand the height is 250,and at the moment we don't have anything on the page.We can't see our logo.Let's add it as a background image.

Now this background image is called logo.svg.We just made it in Sketch and I dragged it into my folderand it works.I'm also gonna do background size coverwhich means it stretches to fill the size of the div.Now if we see it right now,we should have something that looks like this.Now how do I make this fill the whole screen?Now at the moment I've given it a height in pixelsand the width in pixels as well.Now I want this height to be filled,I wanted it to be filled to screen,so I'm gonna us a different unit.I'm gonna use 100vh.

Now the vh just stands for viewport height.It's 100% the size of the width of the,of the height of the browser.Now if we see it right now you cankind of see it being cropped.It's still the same kind of size,but the image is cropped on the edge'cause we're doing position top left.Now because we've got this ratio of four to one,I can also give this a width of 400vh,and the width is using the height of the browser.It's four times the height of the browser.So we have something that goes off the edge of the page.Now at the moment I can't scroll on the page if you look.It's just moving up and down and nothing's happening.Now what I want to do next is because I knowthe distance that I want to travel across,basically the width of this div, it's 400 pixels,I wanna see that whole of the width as I scrollup and down the page.So on my body tag, what I'm gonna add is theheight of this page, is the same asthe width of this div, which is 100, or 400vh.

Now you can see the scroll bar appear nowas we scroll up and down the page,but this div type doesn't move.So how do we make it move?Now because this happens on a scroll event,we need to go into JavaScript.Now, I've already downloaded my jquery.js file.Jquery.com, just download the kind of production versionand we're gonna drag it into my project.

Now jQuery is just a library.We're not gonna touch it.We're gonna make our own script.I'm gonna call this one scroll.js.We could call it whatever we like, hawraf.js for instance.Now we need to add these two scripts to my index.html.So I'm just gonna do that.My script, I'm gonna add source equals jquery, first of all,you need jQuery to use it later,and then the second one is my file scroll.js.Now these don't do anything until wetell it to do something in that scroll.js.What do we want to do?Well, whenever I scroll down my page,I want to move this div across to the leftso I can see more of this other div.So, as I scroll on the page, the document,which is a special word, no need for quotes, on an event.Now what event do I want to do?This is gonna be on scroll.Now what do we want to do on scroll?Well we need to do something on scroll,so we're gonna run a function.

Just gonna open up my curly bracketsto make it a little bit easier to read as wellthen I'm gonna save the amount of pixelswe had on the page as a variable.A variable changes every single time we run this function,so we're gonna call it a variable called pixels.This is gonna be equal to the amount of pixelsdown the page that we've scrolled.Just gonna select the document which is the pageand then find how far in jQuery we are from the top.

Now this is just a variable.Nothing happens until we use it.What do we want to do?Well if we go back to our style.css,what I want to do is change this left position.I want to move it across the pageas I scroll down the page.So when I go down by a pixel, I want to move acrossto the left by one pixel as well.So, because it's going to the left,I want to use negative.So this is gonna basically be,gonna select my div tag and then change the CSS on the left.

Now if I just use pixels right now, what happens?This will move it to the right.So if I scroll down my page,my SuperHi logo is moving to the right,but I don't want it to move to the right,I want it to move to the left.I wanna go in the opposite direction,so I need to basically times itby a negative number, minus one,'cause we're going the opposite way.Now if I scroll down the page now,we have this effect in place.Now I could do more things in this.I could add a delay so I'll make it slower for instance.If I do 0.5, it'd be half the speed of scroll, for instance.So now if scroll it doesn't move as quickly.Now also I could add some more things into my div tag.Could add some more content that haddifferent positions on the place,but this is how we add the scroll effect.We basically put all of our content in the div tag.I've just put a background image,and then we move it across the pageusing JavaScript and jQuery.