The Parallax Effect

Published

September 20, 2017

Difficulty

Beginner

Posted by

Rik Lomas

Topics

On the Firewatch website, there's a lot of layers that scroll at different speeds to make a beautiful effect – this process is called the parallax effect and we wanted to go into some details about it.

Share this post

Transcript

00:05

[Instructor] Hi, so one of my students was talking to methe other day about the Firewatch website.Now if you don't know what Firewatch is,it's just a video game, it's also a really great video game,but the website is also pretty good too.So as I scroll down this website,you'll see that all of the layers of this illustration startto overlap each other and if I scroll back up,they go back to normal.Now how does this work?Now this is using another effect called the parallax effect.Now what is parallax effect?Basically, as I scroll down the page,layers kind of overlap each other.Now I wanted to talk very,very quickly about how this works.Now I've made my very own simple version of this.I've got five different boxes and as I scroll up and downthe page I want different boxes to move at different speeds.And this is the idea of the parallax effect,we're moving different boxes at different speeds,depending on the scroll.Now I just want to talk very quicklyabout how I've set this page up.In my HTML, I've got five different boxes.Each of them is a div tag.I've got div with a class of boxand each box has box-1 or box-2 or box-3,just to give it the color in there as well.Now in my style sheet, what I have is on my whole page,I've got a width of 500, because each boxis 100 pixels by 100 pixels.I've given it a height of 3,000,just so I can do some scrolling and at the momentit would be too small of a site to scroll,just need to scroll somehow.And my box, I'm floating each one leftso the next to each other, width and height 100 pixels,text line is in the centerand then to move the text vertically into the middle,100 pixel of line height.And then I've just given each one a separate color.So at the moment what we get is this idea of,it's just the boxes scrolling down the page,but what we want to do is move them at different speeds.So how do we do that?Now to do that what we need to dois add some JavaScript to the page.Now, I've already given my site jQuery,I've dragged it into my project and you can just get itfrom jquery.com or you can just click the link hereand you can download it easily.Now the first thing I need to do is add my own script,so I'm going to make one called parallax.js.Now the name doesn't matter yet.We're just going to add it to our HTML.We need to add our jQuery first.I'm going to do jquery, if I spell it right,jquery.js and then another tagwith the script of parallax.js.

02:35

Now jQuery is someone else's code,a group of people have written this over time.Parallax.js is my code,it's the thing that I want to write inside.Now, at the moment nothing will happen, doesn't do anything,we've just added two scripts, nothing's happening.So how do I do things with parallax?Well, parallax is an event.Whenever we move any distance down the page,we are adding something to a scroll.So I need to select, first of all, my document.Now document is special word,we don't need to put it in quotes.What do we want to do?Well, we want to run something on an event.Now which event do we want to pick?Now there's a few we can pick from.We're going to pick the scroll event.Now we want to run this event every single time we doany pixel distance so we need to run something.We're going to do a comma and then a, function () {}.

03:30

Now just to make this a little bit easierto read for ourselves, we're just going to openthese brackets out, just to give ourselvesa little bit more room.Now the first thing I need to do is,whenever I move any pixel distance down the page,I need to know how far I am from the topso I can control how far the boxes need to move.So I'm going to save this to a variable.I'm going to save this to a variableand the variable name doesn't matter.I'm going to call this one pixels.Now this is going to be equal to something.We're going to select the document againand then find how far we arefrom the top of the page, .scrollTop.

04:11

Now this is just part of jQuery.JQuery's team have written this for us.Now we just save this to a variable.We're not doing anything with it at the moment.If we see on the page when we scroll,nothing really changes.Now on this page what do I want to do?

04:27

Well, I want to move 1 and 2 slowerand 4 and 5 quicker down the page.3 is gonna stay the same,we're not going to touch number 3 in the middle.So we're going to do box number 1 first.So If I select the div with the box-1,what do I want to do?Well I want to change its top positionto change to be according to the scroll.Now if I just change the CSS for the top position,and let's give it maybe -20 pixels for now.

05:10

Whenever I scroll the page, it will suddenly jumpto 20 pixels from -20 pixels up the page.Now what we want to do is basically do this on scroll,instead of just instantly.So it's not going to be just 20 pixels,well it depends on this variable called pixels.This is going to be zero, then one, then two, then three,as we scroll further and further down the page.So, because we wanted it to go up,we want it to go in a negative direction.We want it to start at zero, then go minus one,then minus two, depending on how far downthe page we've scrolled.Now, if we do this right now, with just pixels.What will happen is when we scroll down the pageit will look like it's being set because the top positionis exactly the same as the scroll position.Now, if I start at a multiplier,let's times that by half, 0.5, what will happenis this will go half the speed of the page as we scroll.Now we want to go in a negative direction,so what I'm going to do is not do 0.5,but -0.5 to make it go in the opposite direction.So now if I scroll down the page,you can see that number 1 goes in the opposite direction.Now for number 2, all I need to do pretty much the same.Select the div with the class box-2and change its CSS for the top.We'll base it off the pixels, how far we are,but I'm going to make this one a little bit slower, 0.25.I'm doing it in a negative directionbecause I want it to go up the page.So on both of them together you can see now,they're scrolling at different speeds.And I can also quickly do this for number 4 and number 5.Go div, box-4, change the CSS for the top to be pixels.

06:58

Now I do want this to be in a positive direction nowfor number 4, I'm going to use the same speedbut the opposite direction.So now I can scroll that way, noticing 3 and 5 don't changeand for number 5, now we can set div box-5,change the CSS for the top, pixels times 0.5.

07:18

Now this again is in the positive direction as well.So 3 is the only one that doesn't move.But as we scroll down the page they have this kindof effect, where if we go back to the top,they just set into position.Now this is quite an easy effect to do,we can add it very, very quickly to a lot of sites,it's only 10 lines of code.Now if I just quickly go back to the Firewatch website,you can see the same kind of effect in process.You can see that this is actually lots of div tags overlaidon top of each other and we're using the same effectto kind of move them up and down the page.So hopefully, you can see that parallaxis actually a really easy effect.It's only a few lines of code, and all we're doingis basing the tag off the scroll position of the page.

Published

September 20, 2017

Difficulty

Beginner

Posted by

Rik Lomas

Topics

More videos

Beginner

23:17

INTERVIEW

Planning, Designing + Coding Your First iOs App with Lou

Beginner

13:53

TUTORIAL

How to Make a Javascript Accordion

Intermediate

17:52

TUTORIAL

How to Add International Times with Timezones to Your Website

Want more? Sign up for our newsletter for more articles, resources, and fresh inspiration!