Demystifying Parallax: Learn to Create Interactive Web Pages with JavaScript | Rich Armstrong | Skillshare

Demystifying Parallax: Learn to Create Interactive Web Pages with JavaScript staff pick badge

Rich Armstrong, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (2h 53m)
    • 1. Why You Should Take This Class

      0:59
    • 2. Parallax Explained

      1:48
    • 3. How This Class Is Going To Work

      2:45
    • 4. Inputs And Outputs

      0:52
    • 5. Capturing Mouse Movement

      18:15
    • 6. Connecting Mouse Movement To An Output

      19:55
    • 7. Creating The Parallax Effect

      13:24
    • 8. Making It More Realistic

      20:08
    • 9. Plan Like An Amateur

      5:38
    • 10. Capturing Scroll Position

      12:50
    • 11. Unique Input Values For Each Element

      15:19
    • 12. Using Mouse And Scroll Position

      3:49
    • 13. Other People's Code

      1:39
    • 14. Putting It All Together

      54:10
    • 15. What's Next?

      1:01
28 students are watching this class

About This Class

1549df1c

You know what parallax is right? It’s that awesome 3D effect we’ve seen in tons of websites, games and apps (like Alto's Adventure for example). Parallax is an interaction delight and it attracts people like crazy. It may appear like voodoo and dark magic, but it’s actually pretty simple to code yourself! In this class I’m going to peel back the illusion that parallax is and show you how to start making interactive web pages with JavaScript.

You'll learn to create an interactive illusion of depth – where items further away move at a slower speed than items that are closer. And you’ll learn to make everything respond to a user's movement, like when the mouse moves or when the page scrolls.

The class is designed for someone with a basic knowledge of HTML, CSS + JavaScript. I do have some beginner classes on HTML + CSS and JavaScript that should get you up to speed.

Throughout this class, we'll cover:

  • Listening for user input (mouse movement and scroll position changes).
  • Connecting element properties like position, blur, and scale to user input.
  • Creating life-like illusions.
  • JavaScript principles.


Here are some related classes, that you may like to take before this one:

Transcripts

1. Why You Should Take This Class: para Lexus is awesome three D effect You can see in tons of websites, games and APS. It's an interaction delight, and it attracts people like crazy. And in this class, I'm going to show you how to hand code your own parallax experience using JavaScript. It may appear like voodoo and dark magic, but it's actually pretty simple and hugely rewarding. My name is Rich Armstrong and I've been making things move with quote since 2000 and six. In this class, we go step by step through how to create a parallax experience by responding to the mouse move on document scroll events. The class is packed with theoretical and practical videos, and by the end you'll be able to amaze your friends and bring life and magic into your Web projects. I designed the clause for someone who knows their way around HTML. CSS and JavaScript serve your keen to create some parallax interactions. I'll see in the next video 2. Parallax Explained: So what exactly is the parallax effect? If you've heard this term before, what may come to Minders website that make stuff move at different speeds as you scroll? This is a good starting point. The Parallax Defectors really an illusion off death that occurs when two or more objects move at different related speeds, making us believe that there's a distance between them that there's depth. One dictionary defines Parallax says, the apparent displacement off an observed object due to the change in the position off the Observer, I added the emphasis in real life when we move, everything around us appears to be moving and all at different speeds. Think about when you're looking out of a window in a car or a train, or even move your hair toe Walk around right now. Can you see how things appear to be moving around you? You'll see that the things that are further away seem to be moving at a slower speed and the things that are closer. Of course it's us that's moving, and that's amazing. Pretty obvious to you. The question, then is how can we replicate this in a digital world when our screens are actually flat without any depth. Well, we have to create an illusion off death. We have to make people believe there is depth where there is none. We get to be illusionists and magicians. This is pretty cool, right To create the Parallax Illusion in a simple way, we could make things move at different speeds. This is what animation offers, but it has nothing to do with the Observer. It isn't controlled by the user. It isn't interactive. Where the Parallax effect really comes alive is when the elements moved based on the user's movement, like when they scroll or when they move their mouth. So when they took their phone and this is what we're gonna be getting into in this class? 3. How This Class Is Going To Work: There are two parts of this class. Really. The parallax side of things in the quoting side of things were going to be mashing those two worlds together. You can take this class and apply it to whatever quoting language you like, but we'll be doing it an HTML CSS and JavaScript. Why? Because it's super accessible. It's super fun, and you can make some things really quickly with it. This means we'll be covering a lot of HTML CSS and JavaScript topics and how they relate to each other, which is fundamental to interaction. Design on the Web. In this class, there are three main things we're gonna cover. That first is what I like to call inputs. We're gonna learn how to track the user's movement and use it to inform how objects on our screen move around. The second is what I like to call outputs. This is where we learn to manipulate how objects move based on our imports. And the third is we're gonna learn about Parallax, which we've already done. But we're also gonna learn how to use the inputs and outputs to create an interactive parallax experience. What's really important is that you learn how to make these parallax experiences based on theory and not just by copy incurred will be hand coding everything in this class. And if you're serious about learning best, I'd suggest you write your own quote as you go. I learned best by following along, pausing the video when I'm trying to grapple with what they've just said, or when I want to understand something, write your own code, try things out, break things and even try things out before I get to them shots. If you don't understand anything or if you have any questions at all, I'm going to use an online service called Quote Pen to do all my coding with in this class . I like teaching with it because we can see the HTML, CSS and JavaScript all in one place and realize the preview as I type, I recommend that you use the two. It's free. It's easy to create new pens, deviate from existing one using the fork functionality and because it's already online, it's really easy to share, which means if you have any issues, you can just share the girl with me. And it also means you can share your awesome work with other students with your mom and with anyone else. The only thing you won't be able to do with the free version of Karpin is upload images, but that can easily be overcome. And I'll show you how to do it later in the class. If you want to write your code on your computer, though, using your code editor that's totally cool. I'd recommend using sublime text to my favorites all visual studio code. It's made by Microsoft. I also use, gets hopeful, backing up your card and gets up pages for sharing that's free to. If you have your own website, you can upload it there, too. So let's get going. We're gonna have a lot of fun. 4. Inputs And Outputs: what are inputs and outputs. I like to see input, says things that can be tracked and responded to. And then I like to see an output. That's something we can control in the world of quoting. It helps when an input has a range. It means we can track it a lot easier and then respond accordingly. Think oven oven dial. It has a minimum and a maximum value or a start and an end value, and these values correspond to a temperature range. With code. We can change object properties based on an input, and the ones that are the most fun and the most realistic are the ones that user has most control over in this class. We're going to be working with the uses, mouse position and the documents scroll position as I'll use that inputs, and then we're going to be changing objects position based on this input 5. Capturing Mouse Movement: So let's get started. What we're gonna do in this video is end up with two input values that we can use to connect our output values to. They're gonna be fraction values conveying the Masters X and Y position. We're using fraction values because it will make it easy to connect our future. Our put values, too. To get a fraction value, we need to get the mouse's current position and compare it to it's maximum position. I'll work with the exposition for now, but the same applies with Y position. The maximum position in this case will be the windows with, so all we need to do is divide the current mouse position by the maximum position. It's a fairly easy calculation, but this assumes that we want to track the mass from the start of the window to the end of the window. Whatever you want to track the mouse position from 100 pixels from the left to 200 pixels from the right, how do we calculate the fraction value? Then let's write down some values. We want the fraction very to be zero when the mouse is position is at 100 pixels and the fraction value to be one. When the masses position is at the windows with minus 200 pixels, we need to calculate the value between the end and the start venues. We could do this by subtracting the star value from the N value, which will call our input range. And then when we get our current mass position, we can subtract this star value from it to negate the stock positions value. This means that if Allah masses position is 100 pixels, it will actually be zero in our calculation. Now, we compared that value to our range to get an accurate fraction value. Using this calculation will always get the correct fraction value. The calculation is not slightly different to before, but we could also use this calculation. If you want to track from the left of the window all the way to the right, you may now be asking what happens if the mouse position is between zero and 100 pixels? What kind of fraction value will we get? Then we'll get negative values. And if the mouse position is beyond the inputs end value, then the fraction value will get will be bigger than one. These values will be really important later on. But for now we could restrict the fraction values to values ranging between zero and one with a little bit of cord. If you need a moment to digest these calculations, I'd suggest pausing the video right share and getting a pen and paper and working it out for yourself. It makes a world of difference when you actually understand it. That's the input. Very now let's implement it incurred already so we don't have any age to mole so far, and that's great. We'll write a little bit towards the end of the video, and I've got a little bit of CSS that I applied to the body. It's got a background color and it's got a margin off zero. We won't write too much CSS either, so we're gonna close that for now. Let's start running some JavaScript. I'm gonna create a variable called Input where I'll set up all of my input information, and this is gonna be an object. And inside of this object, we're gonna say there's a mosque, X objects and most y object. And this will contain all the information for Miles X and for miles. Why? I'm just gonna work with Mouse X primarily. And then at the end of the video, updates everything toe work with mass y two. We've got all start position. We're just gonna set this at zero. For now, we've got are in position, which is gonna be our screens with our windows with, So I'm gonna say window dot with, and then I'm gonna sit my current value at zero initially, and then I also need to put in my range, and I need to put in my fraction value. And I'm gonna do this outside of this initial set up so that we can also updated later on input that mass x dot range equals on. But I'm just gonna copy and paste this to make it a bit quicker dot end minus start. So the mouse X's range is equal to the Mouse X's end minus the mouse exit starts, which in this case, would literally just be the end value. So this looks a lot like that initial calculation, but we'll update the start and the end position, which will make the range way more useful. Then we can calculate our fraction value, but our fraction values. Not gonna be much use unless we can actually calculate the current X and Y position of our mass. So how do we do that in JavaScript? Well, we have these things called event listeners, and we can add them to a bunch of different objects. One of the objects that we can add an event us. That, too, is the window. So I would say window dot add event listener on this kind of function accepts a bunch of different arguments or information that we can pass to it. The first thing that we can pass to it is the type of event that we want to listen to. I'm gonna listen for the mass move event, and then what I want to pass in here is what to do when the mass move events. Because and this is a function. So when the mass move events occurs, run the code inside of this function, and for now, we'll just write console, don't log on. Well, just make sure that we spelled everything correctly and will say working. And then we're gonna call console, which is the court pen console on. We move our mouths around and we see that the console has a bunch of working messages coming through. That means it's working, which is fantastic. No, I don't want to store this piece of code over here because this is an anonymous function. It means that we cannot access it outside off the mass move event. I'm gonna cut this and they're gonna store that piece of code inside a variable called handle mass move. You could also start inside of a named function. I like storing things inside of variables I'm gonna pace today. That means that I can copy and paste this. And that means that when the mass move events occurs, which happens all the time, you know, call this variable, which then runs this piece of code. Fantastic. So if we clear the console and we move on mass Iran just to double check that it is, in fact, working. Now, the next thing that we need to achieve is we need to get the masses X value or the masses y value. How do we do this? Well, in javascript, we get this event object that is passed to our function. You could call this What? If you want some people go for E. Some people go for E V. If you really wanted to, you could call it Bob. I like events because it described exactly what it is. Instead of logging working, I'm going to log my event and then my event object. The reason why I've got event and string is that I know exactly what I'm logging at any given time. If you've got a bunch of console logs throughout your code and you don't have an indicator of what it is, it may get really confusing. Let's care are console and move on. Mouse around. Whoa, What's happening here? Card panel say that the law has been skipped on. Don't say that it's too large for their console, and you might need to use the browser console instead. Co pens console isn't this powerful, so gonna have to use Chrome's console instead. So we got for review developer, and then we go forward job, strip console and it's just move off. Console a little bit down so we can move on. Moss around appear and you'll see that as you scroll down and crimes console. There's a bunch more events coming through, so let's see what this event object is. There's a bunch of keys and values here. Let's just make this a little bit higher. Like so. And we got lyrics layer wives, Client X climbed. Why? We've also got offset X often white page X page. Why all of these look really good X and why we've got a bunch of other information to. But I'm most interested in these X and y values. What I'd like you to do is pick one of these and see if it works. I'm gonna go for client ICS and client why or perhaps pay jacks and pay twi. They're all look really similar at the moment. Let's close this and let's log event that client X on and let's make sure it goes there too clear our consul here and move around on. We're getting some values which looks really promising. So if you go all the way to the left, we should expect a zero, which it is. And if we go all the way to the right, we should expect a pretty large number 572. So now we can check it. This is actually the value. By putting in window dot in her with which is undefined. And that's because we spoke with with a big guy 573 m. This is a lot of suspect, don't you think? Or for now, we're gonna work with this. It's pretty good. So now we've got our client ICS, which means that we can actually go and update our and put on mass x dot current, which equals R event dot client X. It means that we can also updates are fraction values are input dark mass x dot fraction equals. And can you remember what our calculation for this was? Well, it's our import dot mouse extra current, minus the start value. I'm gonna put this inside of some braces that works that out. First, we're gonna divide that by the input on mass X dot range. This is quite a long piece of code, and that's just because we're being over. Lever boasts about it. We're saying input dot mouse x duck currents. And that's just so that you guys know exactly what's going on with all of these values at any given time. So you've got a current value. We've got our fraction value Well, that's it. This is actually working. Let's log out off fraction value on input on mass. Extra fraction. Alrighty. So let's make this a little bit bigger on. We go from left all the way to right, And that's kind of weird. That is going to 1.36 What is going on here? Well, you may have seen that I resize my screen a bit. And so when it always started zero but depending on my screen with and might get to one. Or it might get to not quite one or might get to value way bigger than one. So what's actually going on here? Well, check this out. We storing our end value inside of our object initially, and it's not updating when the screen or the window re sizes. So we need to update that value so that we can update a few other values so you can give us an accurate fraction value. How do we do this? Well, this piece of code here, I'm gonna copy and paste it. And instead of listening for a mouse move event, I'm gonna listen for a resize event. And then instead of calling the handle mass move function. I'm gonna call the handle resize function, like so, so far Handle resize, and this is going to store a function. And inside of this function, we're gonna update our code input dot mass x dot End equals, and it's gonna be exactly the same as our initial value. There we go. And then because our end value is updated, we also need to update our range value because it makes use off the end value. Alrighty. So that should handle that. Let's see if it works clear our console go from left to right. It almost gets to 10.998 It's almost one. We're gonna work with this. We resize our browser 0 to 99 Things are definitely working. What we need to do now is we need to check that if I'll start. Value is at 100 our end value is that some other value. This actually also works. Let's start without start value and then we'll get to our in value after that. So what I'm gonna do is inside about html. I'm gonna create a div with a class of block and I'm using a thing called Emmett, which works and cope in sublime text and visual studio code. Once you've got this abbreviation, you just press tab and it expands it into some code for you. I've got an entire class in this if you want to check it out. So inside our CSS, where Imette also works, I think dot block and then I'll give this a background color and then go for a color that Copan has. So let's go for this greeny kind of color. It's copied it to the clipboard that's paste it. Thank you very much. I'm gonna sit a with of 100 pixels on going to set the heights of 100 viewer height. And now we have this great little green bar, and that's gonna be 100 pixels. So when we clear this, we'll know that when we get to 100 pixels, which is about there, it should be zero, which it looks like it is nominee to sit and to the winner with minus 200. And don't forget that we can also just copy this and paste it down below, where we update our end value. Pretty important, that's just copy and paste this block piece of code, Let's call it Block two and in inside of our CSS will do pretty much the same thing for block to We'll give it a with off 200 pixels. This time a height of 100 VH will save position absolute and will say right, given a value of zero on the top value off zero to I mean, it's on the right inside. If you go to here, should be zero. And if we go to here, it should be one which it is. And now, if we go over one, it's gonna be a value over one. And if we go below zero, it's gonna be a value below zero. There we go. This is exactly what we've wanted from this video. I'm going to show you two more things. The first thing is that if we don't want our values to go below zero and above one, what we can do yeah, is we can say yes, input on most X, a fraction is bigger than one. Then we'll just cap it at one. And if our value is smaller than zero, we're also just cap it at zero. Like so and then we'll log out off fraction value after we've nailed those two things down . When we go from left to right, is there a there? There there is over there. And then it starts working, gets to one, and then hey, but just days that one. So that's a riel. Easy way to make sure that our values range from 0 to 1. But those negative values and values higher than one could be really important in a later video. Now, the next thing is is that we have our y value to work out. So what I'm gonna do here is I'm gonna say, Pause the video and you try and work out your wine values. Have some fun, do some experimentation. I'm gonna get onto my Y value in just a few seconds. Okay? Let's do our y value. I'm gonna change my start to zero again on my end, too. In a with on I'm gonna go down Yeah, and do the same thing. And they're gonna take out my two blocks because I don't really want them. And I'm gonna go to my age, tamal, and take out those two blocks to Okay, now let's go for our Why values. So I just get to copy and paste a bunch of different stuff. Yeah, And instead of going for windows in a with I'm gonna go for window dot in her height, and then I'm gonna set up my mouse. Why range my moss? Why end and my mouse y starts, then when I say handle the most move, I'm going to copy and paste these on. We'll just copy and paste the mass. Why? Into all of these different places. So it's all pretty much the same calculation, the same algorithm. We're just changing values. And instead of the event of client X, I'm gonna go for the client. Why? And we don't have to use thes if we don't want to. So I'm just going to comment them out when press command or control and slash on, I'll just comment those out. We can go fall lugging the fraction X and the fraction Why don't changes Two months? Why then when we handle our resize, we'll just copy and paste these again and then copy and paste almost why? And change up with two inner what? Alrighty. So this should technically work. So this double check that it does, we're going to go for all the way at the top Left should be pretty close to 00 You're all the way to the right, which should be pretty close to one for the X value. And then let's check that are Why works all the way to the top and because there are all the way to the bottom, which almost gives us one. But because of some reasons with this browser, it doesn't quite give us a value of one. There we go. We have a fraction values for both our X and Y mass position. This means that we can plug in some upward values in the next video Fantastic. 6. Connecting Mouse Movement To An Output: in this video will connect our input fraction values we calculated in the previous video with some operate values, which means we get to start making things move based on our mass position, which is super cool. Our output set up will look fairly similar to our input set up. There'll be a start and end value as well as a range and to work out the current opera value. We'll take the fraction value from our input and multiplied by the output range before adding it to the start value. Or we could take that value and subtract it from the in value, depending on what you want to do with it. Now that's the theory. Let's get into some code. We're gonna have some fun now and make some googly eyes move around. When all mouse moves around, it's gonna be great inside of my age, Tamal. I'm gonna create two eyes, So let's go for the eye. And then inside people like so then inside of my C s s like therefore dot I, instead of background color off whites and then with off se 200 pixels, heights off 200 pixels, border radius off 50% because we wanted to be round. Yep. Then a pause. A for absolute on. Then we'll say, left off 50%. Well, thanks. Let's save that. Okay, Left a 50% and they will say a margin left off se minus 100 pixels. Just that's right in the middle. And then we can say the same for the talk off. 50% on a margin, top off minus 100 pixels. Also, that's right in the middle. Will then put that pupil in here and say V G C is black will say with off 50 pick souls of heights of 50 pixels. Border radius off 50% K top value of 50% from pretty much as copy all of this, whom instead of 100 pixels, will just say 25 pixels. Doesn't look right. Not doesn't look too right, does it, Um because we haven't put a position absolute. There we go. We have an eyeball, We have a pupil, we have an I. So now I want another I So let's go for another I Perhaps we'll call this one I one in this one I to great, sir. I one will have a That's a margin left off minus 200 pixels that I to I don't have three eyes. I two margin left. Perhaps you can say zero on. You can give us a little bit more Rome so that 25 pixels to that on 25 pixels to that. There we go. We have some eyes. Now, as I move my mouth from left to right. I want the eyeballs, all the pupils to follow the mouse, or maybe to look the other direction to where the mouse is going. Same with my wife position. We've done our HTML and CSS. Now let's get into some JavaScript. Let's make these panels a little bit bigger, and of the here going to go on and create output set up on this look really familiar. Will go for an X on Why set up and X and y? Because it's not really Mouse X amounts wide. It's actually the exposition will translate exposition and the translate y position. So let's go for a start value and I'll say, minus 100 pixels exit without P X and the end, I'll say 100. The currents will be zero and then arrange. We could just put our range in here off 200. But we'll dynamically create that after we've created the object. I'll just work with the exposition for now, and I'll get you to do the white position later run before I finish up and show you exactly how I would do the white position. So what's off to this is our are put the EC start range and this is our output dot exe dot Uh, end minus output dot exe dot start Fantastic. I'm just going to cut and paste input values where the input coders and the output where the output quotas, that makes a lot more sense. We can also start just counting our krone. But just so that we know what's going on Fantastic. And then down here, we probably don't need this anymore unless you're gonna make use off on input range where the start is not zero and the end is not the window, you know, with So we can just chuck that and then we're gonna do some more commenting here So can do most X. We can say most Why? Oh, just call that masks inputs most. Why input and then we've got some console logging happening here, which I'll just comment art for now. So now we've got our inputs happening. We've set up our outputs. Now, how do we actually convert or connect our inputs to outputs out? Put It's for that correctly output dot Exe that current equals and we've got our fraction value that we can work with. So we're going to say our fraction very month supplied by our output dot exe don't range, which is going to be one value in itself. You don't have to do this, but sometimes it's a bit easier to say. OK, that is a value that is gonna work out first, and I'm going to say output dot exe dot start plus that value. Okay, so now let's, uh let's lock this out. Let's see what happens already. So if we clear this first, you're all the way from the left, which is minus 100. There we go all the way to the right, which is almost plus 100. Pretty cool. So this is working are put values are coming through now. We just needed connected to the HTML. But how the heck do we do this? Everything up until now has bean simple coding. Well, a bit of mathematics, but, you know, no html stuff. How do we actually connect the age tomorrow at the top of my document? This is where I'm gonna sit up my html so h tomorrow set up and inside about html. We've got some classes we've got, I and people. I want to move and make changes on the pupil. So let's try to get the HTML elements for these pupil classes. So I'm gonna save our people's he pulls H Timo collection equals duck you, doc. You men don't get elements by Kloss name and you see how using Camel kcia And then I want to get people, not people's people became So let's say, consoled Log People's HD Moore collection Andi Whoa! You may have seen that quick flash says Log skipped so we'll actually have to check out what that is using Chrome's developer console weaken. Just love that here again, huh? You seem like skipped. So let's go to developer on JavaScript console and this logs HTML collection, which is of people and of a people. You can see that it's actually selecting whether these HD more elements as I hover over them. We can also right click and say, reveal an elements panel. And there we go. We've got these two eyes, which is fantastic. So let's close that there's won't actually help us too much. We need to convert this pupils html collection into an array. There's a few ways you can do that, but one of the simplest is var people's arraign calls array dot from, and we just paste in our people's HTML collection into their. So if you're wanting to make production ready code just double check that this piece of code works in all the browses that you want, your code toe working. So we got off people's array. Let's just double check this. Also log skipped again. Log skipped. So let's go and check out what this brings back and again, it's going to give ourselves to people's. But instead of an HTML collection, it's not gonna be an array, which means we can work with it. So let's close that up. That's Ah, copy this. People's array on Let's go into are up protection of yet we've worked out are I'll put X now let's start and apply output to HTML. We copy out people's Array and then we use this really rad function called for each. Now are for each function takes a function argument. So it's a function. And inside, if you were gonna put an anonymous function there we go and we run Quote for every single pupil that it's inside our array. Now, inside of this function, we get past some information. The first piece of information is the actual element. So you could write Element. I'm gonna write people because I want to know that I'm working with one people. And then you also get past which Lutece is, so that the first people is going to get a zero value when we log I. The next one is going to get a value of one when we log I. This is really, really cool because it means that you can change your co. You can change some logic based on which I it is. It's a bit confusing when I'm saying I so we could use something like K here. Let's say pupil, that style dot transform, and this is actually going to change. The HTML equals and they want to say translate X When you use translate X For now, I want to say translate ex Im gonna say to say, 75 pixels. There we go. Let's see if this actually works right now. It's not do anything because we haven't had our mouths move just yet, says clear this console on. Perhaps we can just clear the logs for now. Boom. So you see now how are pupils? Have bean quoted to be 75 pixels. So if we right click on we say inspect, you can see that it has a translate off. 75 pixels applied. That's fantastic. Summits closed us again in scroll to the top on. We could just take out this console lug, and then we scroll back down to apply output to each tomorrow piece of code. And instead of making this a static value, let's make this a dynamic value, and we can say plus plus and we cannot put in our output that X. That current value right here and what this is doing is this is calm, Captain ating. Three different values. So this string, this number value with this string and is putting them all into one string value. It's called string concatenation An amazing little descriptive word there, and it's applying them to the people that styled or transform value. Let's see if this works. What? Woop woop? There we go. It's quite fun, right? It's just clear. Our console just close. That a That's really, really cool, right? It's fun. It is overlapping a little bit so we could change our input or output values a little bit. So if we scroll up here, we change our awkward values to minus 70 and perhaps our end to 17. There we go. Never quite reaches it. Or what we could do is inside our CSS. We could change our our I we could just say overflow to hidden. That means that when we get to the edge Hey, it doesn't overlap. It just kind of goes behind. So your choice, what to do here? Let's just hide that again. What is next? Let me show you a few really cool things at the moment. Are our pupils follow them? Us. How do we get it to? Not for the mass, but kind of be in verse. So as I move my mouth from left to right, the people's move from right to left. Is that possible? Well, check this out. Are put extra Current equals the output Extra start at the moment. So what happens if we start off at the end? And we say, minus this value, that means as we go from the right and side to the left hand side. It's not doing the inverse of what our masters doing now. What I want you to do is pauses, video, and try Get the why values Working for the pupils. I'm gonna show you how I would do the Y values for the pupils. Let's get going in our protection here. Let's just copy and paste this. So I minus 100 to 100 it should be about the same values. You can change these if you want to. Perhaps we can. Let's maybe change to 1 25 Like so. And then we'll just calculate our range for why there we go Got a mouse eggs and put most why Inputs upper X. Let's get our put. Why? Like sir on, we can start at the end again. Yeah. Changes to why Wells? Why fraction which is really important. You can actually experiment with Mel's ex with your Why, that's a little bit funny. I'll leave it up to you and then every here where we apply to the HT Mom, instead of using translate X, I'm gonna use translate, which means that I need to put in another value of it here. We can say 50 pixels on. We will move our mouths around. This will always stay at that same position. So there's not quite what we want. We want this to be dynamic. So instead of 50 pixels when you use the more string concatenation here, so we'll put in single quotes plus plus, and then between the pluses will use our output. Why not current? Okay, let's see what happens. Yeah. So this is going exactly where all mouse isn't going. Did you see that? We can actually hide our eyeballs, which isn't ideal. So I'm gonna change my values here too. Maybe 75 75. And I'll change these two, 75 75 to. So there we go. Pretty cool. If we wanted our Y value to follow on mass position rather than be in verse, we could start at the stop position and then add this piece off the calculation. So you see, as I move my mouth up, it follows my mass as I go from left to right. The eyes do the opposite so you can change the card really easily. And it's simply updates Tht mall for a stretch kind of exercise with this. What I want you to do is I want you to try for each pupil, make them move in a different direction. So as I move my mouth from the top of the screen to the bottom of the screen, I want one I to follow my mouth and I want the other. I do not follow my mouth. I want it to be inverse and the same thing for the X as I move my miles from left to right . I want one I to follow the mouse, and I want the other I to do the inverse, pause the video here and see if you can do that. Let's try this out. I want my my people's to do the opposite things. What's great is I have this K value, or I value whatever you want to call it. I'm gonna say if and I'll say k equals equals equals zero, which will be the first. I do something else. Do something else. So there's just copy and paste this. And here. Copy and paste isn't. Yeah, And let's take this out. Which kind of looks like that this should still work exactly the same. We've got the same piece of code in it. Now I've got my current's values. Yeah, What I'm gonna do is I'm going to change or at a different value. So I'm gonna copy and paste this output X and I must say dot opposite, and I'm gonna say start, plus this value of, um and I'm going to do exactly the same for my wife value. I'm going to say the opposite is the and minus and the start. Plus, Now, you could call this What if you wanted You could call it in verse. You could even just change this to start in this to end. And this two plus in this to minus whatever you want. I have now, but to kind of opera values that I can work with. I've got the current and I've got the opposite. Let's see what happens here. If I update this too opposite and opposite. And this one to current and current. What happens? Oh, okay. I got all the way to the middle. Hey, he's normal. And if I go all the way to the left Oh, he goes a little bit like, weird squinty. Forget all the way to the right or super squinty. So there we go. You can start having some fun. All in quote DHT Mole is just being updated by your code. Really cool. So in the next video, we're going to take this to the next level. We've learned how to move things around with JavaScript. It's been really fun, but at the moment there's not much depth. There's not much parallax. So we're gonna introduce Parallax and depth in the next video. I'm looking forward to it. 7. Creating The Parallax Effect: in this video, we're going to create an illusion off depth. There are various ways of doing this, but one way I quite like, is to give each parallax elements depth value between zero and one. Yes, we're talking about values between zero and one again. But why? Because it's easy to connect to our are put values. Zero means very close and one means very far away. As an element gets further and further away, it will move less and less quickly. How we do this in code is for each element. We start with the X and Y output that we worked out in the last video, and then we subtract value that is made up by multiplying the current X or Y output by the elements. Depth. If the depth of an element 0.5, then the X outputs of that elements will be half the current X output. If a elements depth zero, the X outputs off that elements will be the full X are put, and of the depth of an element is one than the X output. For that elements will be zero. The other thing we need to be aware off is where our elements appear onscreen in HTML. Unless you specify elements Z index, it will appear beneath elements that come after it and on top of elements that come before it. If our first element has a depth of 0.1 and our second elements has a depth of 0.8 in HD mole, the second element would appear on top of the first. But according to the elements depths, we want the first element to appear on top because it has a lower depth value. So unless you want to manually set Z and X is or put all the elements that are further away at the top of the documents, then we need to adjust the Z index values on each elements with code. We can do this by setting a Z and X range. We then work out in Elements Z index. By subtracting Z index range multiplied by the depth from the Z index range, the Z and X range should correlate with will be higher than the amount of decimal places you intend to use in your death values. If you're using single decimal places, then a Z index range can be 10 if you're using two decimal places, then use a Z and X range of 100. And so on is the index range of 1000 or 10,000 is a pretty safe bet. So, as you can see, it's all to do with depth. Now, let's get into the quote. We've got quite a bit to cover while our googly eyes example was pretty fun to play with and to create is not really going to help us in creating a parallax experience. So I'm gonna do some remodeling here. So first up, I'm going to remove my eyes from the HTML and create some her, uh, lacks item elements so we can create maybe three of these and then in my CS s instead of my I want and I to on instead of my pupil. I'm gonna change my dot i to Maybe it's just copy and paste this to parallax item background color. We can changes to black. The background color is black, the width and high 200 border radius. We can take this out. Okay, position is absolute left and talk margin left, margin top. That's all good. It's looking great is in the center of the page, the overflow head. And we can take that out. What we'll do is for each of those elements. Rule said a separate background color and then at the top here, instead of pupils, HTML collection were going to say items age two more collection, ongoing copy and paste that instead of looking for a class, um, if people were again going to be looking for parallax item so we can copy and paste that And instead of pupils array, I'm gonna go for items array. We then got out inputs, andare outputs, which are all pretty good. I'm gonna change these from 75 to 100 just so that there's a little bit more movement. Perhaps we can even say 1 50 So that's just copy and paste thes. Our outputs are handled. We then got all mouse X and miles wide inputs being worked out. We've got our awkward X. I don't need a current and an opposite being worked out all the time, so I'm just gonna go for current and I'm gonna stick with the end minus this value Here, apply output to HD model. That's great. So we're gonna go with our current value. So let's just take this on and override this because there's gonna be normalize. And instead of all pupils array, Sha ger full items array on instead of referencing this element with people, we can go item and then item that style that transform. Then we translated, so it looks like it's working Fantastic. That's put some styling into these blocks. So I want to say, Background, killer And what color? Dwight once. Well, this one's gonna be black, so that's great. Let's copy and paste the's style attributes. Let's open up our assets panel and cope in. I'm just gonna copy one of these on Pasted A. Yeah, And then let's go for a blue and pasted over here. Thank you very much. Now we have all of our squares moving at exactly the same speed. What's happening here is that if I comment this out, you'll see the pinky one. And if I come in this one knots, you will see the black one. And if I coming there both and again, just take it from me that they're all moving and exactly the same speed. And so what we're gonna do here is we're going to start introducing. Our depth follows item one. I want a depth off SE 0.1. So in JavaScript we can use data dash depth. And when I say depth, you can put whatever you want you it's up to you. So let's go for 0.1. Let's copy and paste this. Let's just make this a bit bigger on this can be. Is there a 0.3 and 0.6? Okay, so that means that this one should be our closest square. This one is in the middle, and this one should be the furthest one away. And yeah, we can see that that's not the case, but we haven't done any quoting to make it. So let's just hideout html and CSS. And let's go down to our items array for each loop. And in here we can start playing around with the depth. So to actually get the depth into javascript, this is what we're gonna do. So we're gonna save our depth. I'm gonna stole this depth inside a variable called depth and will say item dot dot a set dot depth. And when I say de fia, if you named Joel, Dr dash depth, something like Dr Dash Distance. Then you'll say Datta set dot distance, but we've got depth here. Let's see if this is actually coming through. Console that log and will say K for the item, then will say depth on def. And so when we move all mouse around, the first item has a dip of 0.1. The second has a depth of 0.3 and the third has a depth of 0.6. So the items air coming through the thing is, is that these are text values. I want them to be number values. So how do we get that to happen in JavaScript? Well, we can use this thing called Pause Float. They re select That's and the enemy put embraces on what passed float does is it converts something into a number and specifically number with decimal places, and we know that we have decimal places, so this works really well. The other thing is, is that we need to put Kama 10 if you don't put. This is not a massive train smashed, but it's best practice. And the reason why we put comma tenia is because we're saying we want this to be a decimal system. It could convert a number or a piece of string to something that counts by Fifteens, for example. This is really good practice. Let's keep that in. And now when we move around, we'll see that these are old numbers. Now they're orange. They don't have quotes around them. Now, how do we actually apply this to each of all squares? So let's sit up and item out put. And this is gonna look fairly similar to our output above. Yeah, Except we won't have a start in, and current value will just have an X or a Y value. We don't need each of these. Don't young. We're gonna have our X value. And what is our X value Gonna be? Well, it's going to start at our output ex dot current. So it's gonna be that as a starter and will say, minus the output, extort currents multiplied by the depth. And we can put braces around these just to make sure that we know that it's being calculated first. But it does actually calculated first because off the multiplication sign. So we've got our our exposition. Now we say item output dot Exe on. Let's see if this works. Hey, so the y install part off the general of the global Y position. But our X is determined by our depth, which is pretty cool. So now let's put the wide position in him. We can just copy and paste this. Why I put the Why up, duck. Why an ultimate off put that Why there we go. And now you can see that it's moving inversely to our mass position and it's based on depth . So let's clear this enclose threat. There's one small problem still in our age, Dimon. You'll see that our death, this one is at 0.1, which means it should be at the front right, because it is closer to us. Even though this looks nice, is not really true. The closest something is, the quicker it should be appear to be moving. So how do we change this? Well, and on JavaScript, we cannot stop changing the set index or the Z index, depending which part of the world your from. So that's add a new value here, Z index, and what we're gonna do is we're gonna say 10,000 is gonna be out of Z index range will create a new variable in our are put shortly. But we start with 10,000. It's just a really safe number to work with. And so I'm going to say 10,000 minus 10,000 multiplied by our depth. I came. Now we can just put these embraces just so that you know, that that's being worked out first. If our depth is one, then I was that index is gonna be zero. And if our depth zero it means I was at index or Z Index is gonna be 10,000. So then we add another line for our item and ST dot style dot is it index was the index equals, and we just plot this number into their and hey, that doesn't work. That's opened up our console logs trimmed. Okay, there's no error messages. Things aren't working. What's going on here? So we have to go to a chrome developer JavaScript console. And it says reference Arazi Index is not defined. This is happening all over the show, and we can come down here and say, uh, Z index, it's not item output. Duct Z index. It's just Z index. So there we go. That should fix things for us. Fantastic. Now black box is on top, Are blue box is at the bottom. Things look really life like now Pretty cool. You may notice something a little bit strange. Now these items are all actually the same with and height. But as we've moved them backwards, further and further away, they don't appear to be further and further away. So what you could do is you could manually scale them or change the width and height the further and further away they get. Or you could do it with quote. You could do it dynamically. And so that's what we're going to be getting on to in the next video. 8. Making It More Realistic: So we've made some parallax magic happen, and it looks awesome. But if we're trying to get things looking and behaving like they do in real life, there will always be more things we can do in this video we're going to address. Two of them will also do some code optimization, and I replace the boxes with some nice looking leaves because leaves are cool, So the first thing we need to address is scale. If there are two items that are the same width and height and one of them is further away, it should appear smaller in scale and it should appear smaller according to how far away it is. Its scale should be relative to its depth. You can hand coat each element scale, or you could do it with card. And of course, we're gonna do it with code. We could calculate the scale really easily by starting with one and subtracting the elements depth. But perhaps we don't want our items to be so small. So let's set to start and end scale, which will lead us to creating a scale range, Then to calculate an element scale. We start with the start scale and then add the depth multiplied by the scale range. This looks pretty familiar, doesn't it? The next thing we need to address is blurriness. Items will appear more and more blurry the further away they get, but we don't necessarily want them to get blurry until a certain depth. Otherwise, everything except elements and zero depth will be blurry. So one way we can calculate blurriness is by deciding on a starting depth value, which will be where the blurriness will kick in and the other is a blur range value, which will be how blurry and element can get. The starting depth value needs to be a very between zero and one, so that it correlates with the depth values and the blow range. Value is what will connect each item's death too much like Ozzy and next range are elements . Blow value is then calculated by subtracting the starting death value from the elements depth and then multiplying that without blur range. You may end up with some negative blur values, but at the moment it means that those elements will appear non blurry, which is exactly what we want Now. Let's implement scale and blow in our code on while we're doing it. Let's optimize our code a little bit. Let's turn out blocks into some cool looking leaves first, so we'll open up our HTML panel. Let's give it a bit more space. I'm gonna take out the style attributes whom boom on boom and then inside off my parallax item, I'm going to add an image and the source. What is the source gonna be? Open up my assets panel. Inside of current pin is a bunch of images. You could go too far, Atos, but they're not ideal. So with Kerpen Pro, it allows you to upload your own assets by uploaded a bunch of my own parallax assets. You could use these assets if you want. You can also use the assets available in the class, and I'll show you how to upload your own assets and copy the your role. If you don't have cope in pro, we've copied that that's pasted into our source on. There we go. It's coming through. Let's just copy and paste these into our div items. And then I said number two and I said, number four. There we go and I'm using asset number four instead of asset number three. Because asset number three is a splotch, A really big splurge and doesn't look so cool. Then inside all C s s on Go docked, parallax item and I'll address the image within parallax item. And I'll say with all Perhaps Max with is 100% on max. Height is also 100%. Let's see what that does. Yeah, that looks pretty good. Now, how do I get it into the middle? Perhaps we can use, um, flicks are, uh, the air four display flex are saying justify content since ah, on a line items center. There we go. We can take off out background color. We can change the within the high to three inch pixels on. There we go. We now have three leaves on top of each other. What I want to do now is I just want to retain the leaves a little bit. So let's open up our HTML and do some in line styling here. 1st 1 let's go for a style attribute and has changed. The trans form rotates to about 30 degrees. Like so, they will copy and paste. This on will change us want to negative 45 this one to something like 110 Onda. Does that work at all? Nope. Because we've spell to transform room Franz form about that. There we go. Things are starting to work now. Okay, so we have some interesting leaves happening at the moment. They're a little bit better than all blocks. So we've got our html down. We've got our CSS done. Now let's get onto some Java script optimization. The first thing I want to do is I want to remove thes values that we don't really know what they are. And what happens if we change one. Then we always have to change the other. So let's change this to output dot z index dot range on will copy and paste this and then appear will just put in our Z index object and will put in a range key and the range will be 10 1000. So that's the first optimization that I want to do. The reason that I do this is so that I don't have a bunch of these 10,000 numbers just all over the show. I know exactly what it is, and I can update it in one place and we'll update it throughout my code, which is really cool. The next thing I want to do is I want to change how this handle mass move function works. Instead of having all this quote inside of here, which is getting really, really long, I want to split it up. And the way I want to split it up is I want to create a variable which is called update inputs, and I want to stall a function in here which runs this code. So let's take this card from here and put it into this function. I'm then going to run update inputs from within this function. It means that I know exactly what it's doing. But I don't really have to look at the code and scroll through it every single time. The only problem with this way of doing it is that event will not be present in this function. So what I'm gonna do before we call update events is I'm going to assign my master x two event that client X and my mouth start. Why, too, events, doctor, client, why? And you may be thinking that well where the Hankins Monster X Coming from what we're gonna create that. So let's go for of our mouse on were created object and its X will be zero and it's why it will be zero. And now when we get the event will say Master X equals event Client X and then instead of a signing event, Dark client X two Almost excess current. We can say most dot exe on and most dot why? That means that we can run our update inputs without having to rely on an event. Property now listed the same for our output. So this creates a variable called update. Our puts on its story function inside of here. We can cut this on, paste it. And instead of having two lines of comments, I could just say I put X and why it's just do it like that that looks of bunch Nita. We then call the update outputs function straight after the update inputs, and then we want to put this into a function too. So this one's a little bit different because we're creating an item awkward for every single element. And then we're updating the HTML. So what do we call this function, perhaps you can say updates. Each item update each her relax item. How about that? So let's copy that paste. It will save our equals function. And then we can cut this on. Put it in here. So now our code looks a lot more readable. We just see that it's updating the inputs. It's updating the outputs and then updating each parallax item. This is also really cool because we can call each of these separately and outside off this handle mouse move, function. That's great. So we've cleaned up our code a little bit now. What's next? Its scale time. So where do we do our scale? What we do at scale on our item output. It's at a new property to our item output. And I'll scale. What is this gonna be? It's going to be something like output that scale that start Plus and we're gonna put inside out brackets here output dot scale. The range multiplied by the depth on. We haven't set this up, so let's go and set it up. All of these, we can actually just hide them for now, which is really cool about cope in. It's also available in other code editors. We can hide the mouse value and then let's go and put all scale. Yeah, I'm gonna have a start value on the start value. I would recommend being one because the scale of one means that at the original size, we then have an end value and the n value perhaps could be a 0.2. But we'll update that in a moment, and then we're gonna work out our range much like the rest of these calculations. Output dot scaled arrange is output dot scale that end minus output dot scale that start, you may be thinking, Hang on. We'll be starting with point to and then subtracting one which will give us a value off negative 10.8 as our range. That's perfectly OK. You could change it if you wanted to. There's no hard and fast way of doing things with code. This is just the way that I'm doing it. Let's scroll down and our scale is not output scale that start which would be one. And they were adding the output scaled a range which is gonna be a negative value multiplied by the depth. So if our depth is one. Then I'll output that scale. The range is gonna be negative 0.8. So we're basically gonna be saying start plus negative 0.8, which will give us 0.2 of a scale, which is fantastic NFL scale. Or if our depth is at zero, the output dot skilled, a range multiplied by zero will be nothing. So then we'll be left with a scale of one. Now the problem with scale is that scale and translate. Both are transformed properties. So we'll have to add scale into this line of Kurt here. So, scale, let's try it out 0.5. It's about mass Arancha. There we go there really small. So let's make a dynamic. I'm going to go for item output dot stale. Alrighty. That looks pretty good. And if we scroll up here and we set out in scale 20 things should get a lot smaller. Perhaps if we change our HT mole who changed at the 0.6 to a depth of one, we should actually see it disappear, But it's not right to be seen, and that's because I end is zero and I'll have a scale of zero So what do we do here? Would change it back 2.2 point three or, if you want 0.3 and then there we go. It's not quite zero I don't like items. Having a depth of one means that they don't move. So I prefer going 4.9. That moves slightly. We now have our scale sorted. That's done. What's next is the blurriness that put in a blur value over here on our item up put. And what is the blur calculation output dot blur dot starting depth, which we haven't quite set up. And we're going to say our depth minus our output. Doppler starting death. I'm gonna put this inside of Brace. It works that our first and then we're going to say multiply by our output dot blur dot range. So what this is doing is it's saying that we have a depth. This could be zero. So zero minus are starting depth, which would be 00.5. Maybe so you'd have a negative 0.5 multiplied by the blue arrange. It would give you a negative value, which is perfectly fine for, and item with the death of zero. Let's just put in this output value. So let's go for blood and let's sit are starting depth on, Let's say 0.5. So anything that's at 0.5 or above will start getting a blur value. Well, then said our range, I will say 20 for now. Let's implement us into the HT, Mom, we'll go item dot style that filter, which we haven't used yet and we actually just string value for this on will say blur on. Let's just try five pixels right now. Move on, Marcelo. But there we go. We have some blur values. Now let's make this dynamic. So what's really important to know it shares that you do need a pixel or some kind of measurement value, so we'll just remove the five and put in item. I'll put dot blow And when you live on mouse, there we go. You see an item that is further back is not blurred and the items closer to us, they're not blood. So if we changed the values off starting depth, that's maybe change that 2.1 will see that my item, which is at 0.1 Hey, it's still not blurred. But the items at 0.3 and 0.9. They definitely are blurred. And if we had to change our range to something like 40 you should see that the items further back it even more blurry. We've got out blow set up. The only thing that you may have noticed is that every single time I change my code. So I'm just going to put in a bit of random code here. You'll see that before I move my mouse. These things aren't blurred and they aren't scaled, which is kind of problematic. It means that unless or until we move, our mass things are not actually gonna look as if their blood or scaled. So let's take this out and it's implement some code that will fix this. So what's great is that we've actually done a plate inputs up that outputs and update each parallax item, and we can just copy and paste this code on, go to the bottom of our code and paste it. Let's un indented it, and from the get girl, you'll see that now things are scaled and things upload. There are kind of slightly offset doesn't really look like they're in the middle. So perhaps What we can do is adjust our mosque X and Y position. Let's go to our mouths x and y, and we'll go for window dot Ah, in her with and window dot in her height. Perhaps we shouldn't do that. Perhaps you should say it won't supplied by 0.5. Well supplied by 0.5 doesn't mean the X and Y will be in the middle off the window as if it was about which looks great. So if we do some current changes or someone comes and visits are little pin or our site, it means that before they've had a chance to move the mass, things are gonna look blurry. They're going to be scaled, which is fantastic. So we've done a bit of ah, code updating. We've implemented leaves into our parallax examples and we've done some scaling and blurring super duper. And as promised, I actually need to show you how to upload your own assets. So if you open a new tab in search for image hosting, and then there are a bunch of different ways that you can host images, some of them do not work, but just try it out. So what we're aiming for is we want to get an image your old that we can pop into cope in. So let's go start uploading. We choose a paradox asset like this cool face, we say, OK, that's upload and then we wait, wait, go. And then we copy its link. You paste. It's link. This is not the image. You are wrong. Once the image lords you right, click and you say copy, image address. Pace that again and you see him says dot p and G or duck J pig. Whatever you upload can then copy this year old on, then inside your HT mole, you can paste that and there we go. You don't need code pain to upload images or to put images into your projects. Now we have a cool face, and we don't need to use cope in pro. Or, if you're not using cope in at all and you're on your local computer, it's pretty easy just to reference images on the file system using relative Urals super easy. There are a few things we could add, an implement that would make it even more realistic and perhaps even give it a bit of a wild factor. If you can think of any that you'd like to try implement, I suggest you try coded up yourself, have some fun, make some mistakes. And if you need some hope or things on working like you expected to show your old in the common section off the class and I'll try help you out. 9. Plan Like An Amateur: When you design and code various versions off the parallax effect, there can be a lot of moving parts. This is not just the case for Parallax, but also for other interaction. Design pieces Planning becomes an essential part of the process and even mawr essential. When you're working with the team, trying to figure out everything in your head like a professional for four hand is just not going to work. Or if you're trying to make everything work magically while you're coding, even never happened or it takes way longer. And if you're just plan in the beginning, so how do you plan? That's a great question. So I plan in two ways, and I do both of them at multiple stages off a project. The first method is writing down what I want to happen. I start by writing fairly broadly and descriptively. My first piece of writing may look something like this. As the user moves their mouse, the items move. I then would go to something like this. As the user moves their mouths from left to right. The items move from right to left, and then I'll change it again as the user moves there, miles from left to right. The items move inversely from right to left at a ratio, and then, as the user moves their mouths from left to right, each item moves inversely from right to left at a speed relative to its distance away from the user. So you can see how adding more and more detail to my description here. Finally, it or end up like this. As the user moves their mass hard silently, each item moves inversely at a speed relative to its distance away from the user. This may sound a little bit complex, and this is why I didn't start writing complex because this is a little bit mind bubbling. So this, in description, is my goal. I start with this in mind, and you can see how it changed over time. The more I got out of my head, the more detailed I could then be. I ended up making it succinct and slightly more generic. My next step is to break down my goal into manageable chunks. When things are broken down, everything seems easier and relatively simple. Thes chance are part of my action plan. What's important to understand is that I don't create the whole action plan at once. My next bit of writing may end up looking something like this. Track Mouse X Using most move events, compare mounts X to screen with to create a fraction. Connect that Fraction two elements X range. Do this, full each elements and apply a depth. And then, for each point, I might break it down even further. So the track mouse excusing Miles move event. I may make some notes like this one ad event listener to create a name function handle malls move. Maybe three. Create a variable that stores event X inside of handle mass move. There we go so you can see how I'm writing this all. I don't have to do everything all at once. What ends up happening is that these lines can become comments in your JavaScript, which you can then follow really easily there, like you're pointers in a maze. As you get better and better, you may find yourself skipping part of the planning. That's perfectly OK. What's really important to remember is that at any point in time or any point in the process, you could make a plan. Just write out what you want to happen in point fall, either in a JavaScript comments or on a piece of paper on a regular text documents. I have a massive pad on my table most of the time, so I could just quickly make notes. I can quickly plan break down what needs to happen in English or whatever language you speak best, and then write the code for it. The second type of planning I do is putting pen to paper or pencil to iPad. I draw things. I worked things out. I draw the documents I draw with the screen currently is and draw with the masses. I draw elements. I draw everything I can. And then I start putting fake values into places, my mouse X on my screen with my output range. And then I start making calculations. I represent unknowns with wise and Bees and Xers. I make the calculations ledge abril and preferably in Java script, all something that can be easily transferred into Javascript. And then I tried the same drawing with different values. I see what results I get. I then try the interaction at different stages when my mouse is all the way on the left when my mouse is in the middle, when my monsters all the way on the right and then once you think you know what's going on , replace the made up values with variable names. These kinds of planning sketches are golden. It's like you have these moments off brilliance, these lucid moments where you're just a genius, which you record. You put pen to paper, you do all your calculations, and then you use it later. When you're not feeling so brilliant, there's a very small Chinese. You can remember all these calculations in your head as your coding. I find it best to write it down and then transfer to code. What's great about planning is that it doesn't need to be perfect, and you don't need to do it all at once. You could its rate on it quickly. You can show to people you can improve on it, and you can jump back into it whenever you get stuck. You can use a mixture of writing and drawing whenever you want. 10. Capturing Scroll Position: Now that we've created our first parallax experience, we can get into creating a scrolling parallax experience. This is really fun to create, and most people are totally mesmerized by them. What do we want to achieve? So the first thing that I want to achieve is I want to create scroll. Why input fraction value that I can connect my are put values, too. The second thing I want to achieve is I then want each of my elements to move in the opposite direction to the scroll direction. But proportional to their depth, the further away an element is, the quicker it will be moving this time, but in the opposite direction to the scroll direction. The only thing we need to watch out for before we jump into code is that the maximum Weaken scroll is actually the documents height minus the windows hot. Let's remember this when setting up our scroll white input in value. Cool this jump into cord. So let's start by making out documents, scrolling documents that's jump into our H two Malika on and we can create some things called pair Relax containers, Carnitine er, there we go. I'm just going to dent that card. It's paste that dead. We can copy and paste parallax container like soon. Um, yeah, that's good. And then we can give this one an out clause and this one an out clause so we can change their background colors. And then in the CSS, we can paste this and give it a height or men Heights off 100 VH, which is 100 viewer height on weaken. Say parallax container dot out and can give this a background color. What should we choose to this? Care for assets. Let's choose there any life green maybe perhaps a much darker green or we could even go for already like pink. There we go. So let's paste this young not as we scroll down there will be green and pink deserves So it just shows us how much we scrolled. We also got this scroll bar on the right hand side. There we go. So now we've got a document that scrolls We can also add all of these parallax items into Second Parallax Container and the so mean as we scroll down where are they? Have no idea. And that's because we haven't put a position relative into our products container. So if you scroll down, there we go. That looks really nice. The colors work really well together. Okay, so we just got one and two lives without leaves him. Now we've got our miles move working. So I'm gonna comment that out for now. So instead of listening for a mouse move, that's actually not gonna work anymore. We're gonna start working worth an event listener that listens for a scroll event. So how do we do this? Well, instead of listening for a mouse move on the window, we're going to say duck, you meant dot event listener. We're gonna listen for a scroll event on Will say I know. Scroll. Okay. And then far. Handle scroll. He calls a function. And all of this should look fairly familiar. Let's just log something to make sure that this is actually working. Scrolling open up our console on as we scroll. Okay? Getting a bunch of scrolling happening. And now how do we know how much we're actually scrolling? That's a really good question on the way we're going to do that is we're going to work out var scroll amounts equals. I'm going to go for duck. You meant dot Dark humans elements dot scroll top. Let's see if this works on going to say scroll amounts on scroll amount and we'll open up console again. That's clear that Azzawi scroll! There we go. I'll scroll amount is coming through. So the latest one is zero. And as we go all the way to the bottom, it's 951. This is our scroll amounts. Perhaps we can now figure out what maximum scroll amount is. So how do we do this? Well, again, we're gonna use this document dot document element and we'll say scroll Max equals document that document element dot scroll Hot on and we'll compare. It's like So there we go. So let's scroll this. The scroll Max is 1268 AM This is not really working out, is it? But remember, the height of the document isn't going to be the same as the scroll amounts because we've still got our window height to account for. Let's do minus window dot in her, But Okay, let's scroll again. 9 51 9 51 Their regard. We have our constant value. We have our end value. Now we can take these values and create an input from them. I'm going to just copy them for now. Let's just give ourselves a bit more space, will go up to our input values and will say Scroll, Why on will create a new object here and we'll say, start and I'll start is going to be zero. We can change this to some value beside zero, but in this case, we wanted to track our entire documents Scroll position. We're then gonna have an end value, which is going to be out scroll Max. Well, all of that. Now, this is really, really long. So what we can do here is say, var and we can say HTM o equals document that document elements. There we go. And then we can replace that on that. Okay, So are in value. It's gonna be that and then I'll scroll amounts. This is gonna be our current, so we can actually work that out a bit later. So the current will be zero in the beginning, and then we also need our fraction on our range. So we'll work out off fraction a little bit later, and we'll work out our range just beneath the input. Let's go for input dot scroll. Why dot range equals And then we can just copy and paste this scroll light Don't end minus scroll. Why dot Start which will give us our range. Now what's really important about the range is it will change as soon as the scroll wise end value changes and the end value will change when the browser resize is let's update that value, we get onto the resize. Okay, so the mouse x minus y So let's go and put dot scroll wide dot end and what was our in value? It's scroll up here. Copy and paste this scroll all the way down again. Alrighty. So RN value gets updated and then arrange value also gets updated. So that's copy. Scroll, wire range calculation. Andi, that's pasted over here. It's not always saying handle Scroll. Why? So we've got the scroll amount, which is not actually going to be out input dot scroll. Why dot Current and this is gonna be out html dot scroll tuck and then our inputs duct stroll. Why dot fraction is going to be what in this case is going to be our current divided by the maximum. So input dot scroll why dot End? But remember, our previous calculations, if you could just look a little bit higher of the here. The update inputs is our input. Mouse fraction is our most ex current minus arm Arctic start divided by our input mouse X range. So we're gonna copy this format. Let's go down here, Handle scroll, and we're going to copy and paste this and this is just more accurate. As soon as we start tracking out document from a non zero position to a position that isn't the total height of our document will need this to calculate the rial fraction. Okay, I'll scroll Life Fraction is gonna be the scroll. Why? Current minus two scroll. Why start which in this case is just zero on. We're going to divide by the Scroll Wide Range, which in this case is also going to be the scroll. Why end value that's handling the scroll. But now you may be like, Well, why? Why is the other one inside of update inputs? Can we not put that in there? Yep. Of course we can. Let's do that. Let's copy and paste Update inputs to our handle. Scroll. There we go. On door. Just cut this. Take all of this out and put this into our inference. Well, have yet There we go. There we go. I'll input is now coming through. How do we know? Connected to an up. But we're gonna update outputs right now. I'm just going to comment out our outputs so that nothing will work at all. It's not working anyway, on what we can do here is we can just update our y position. So I'll put the wider currents is our output dot Wider end minus out input. And we can go scroll. Why dot Fraction multiplied by our output dot range. So let's see if this works as we scroll. Is anything happening at all? You noticing anything? No, I'm not noticing too much. So anything happening here? Well, what about the outputs yet? The wide occurrences working? Yeah, it should be working by. Remember, we actually have to call update outputs, so let's copy this. Well, that's copy update outputs on update each parallax item and let's put it after we call the update inputs function inside our handles scroll even Tana. We can also just cut this and perhaps put it just Yes. So it's a little bit closer to our handle. Mild, smooth event handler. There we go. Now let's see what happens as we scroll. Okay? Things are happening. You can see that The Parallax is certainly working. We've got some blur going. We've got some scale going and it's all related to our scroll position. So we have achieved what we've set out to do in this video we've connected and input to and outputs using our scroll position. It's looking really good. There is a couple of problems with this. So, Father, we're gonna cover this in the next video. We'll see there. 11. Unique Input Values For Each Element: our parallax experience from the last video is looking pretty good. But if you look closely, something's not quite right. I'll show you if I go all the way to the bottom of my documents and I comment out these update, input and update output functions and I stopped listening for the scroll event. You'll see that all of my leaves or all of my parallax items, their sense it in the middle off the page. And then if I scroll down a bit so these ones Now when I coming back in my code over here, my coat over here, you'll see that all of the parallax items are at the bottom of the page. Why is this? Well, there's gonna be two reasons why this happens. The first reason is that when we scroll up to output, why currents calculation? You'll see that we start with the wider end. So basically, we're saying, let's start with the wider end and then as the fraction value increases so we'll get closer and closer to the start value. Instead, we want to say let's start with the star value and as the fraction value increases, let's get closer and closer to the end value. This is looking a little bit better. And now if we scroll up a little bit more, we'll see that when we define our star value, we actually started at minus 1 50 So we're gonna start this at zero. Now, everything should start at exactly the right place. Now, when we scroll down that these items in this pink container, they don't start in their original place. That's what we want to achieve in this video, when we get to an item or when we scroll to an item. We wanted to be in the original position. And the reason for this is that these items are moving based on the scroll fraction from all the way to talk to all the way at the bottom. So what I want to say is, I only want the scroll fraction to be zero about young and one about here rather than all the way at the bottom and all the way at the top. I don't want the output of each item to be based on the whole document scroll position. I wanted to be based on when it's visible, So the question that we need to ask is at what scroll fraction should an element be at its original position? Because at the moment, they're only in their original position when the scroll fraction is at zero. So how do we work the socks? The key lies in our update. Each parallax item function inside of the items array for each loop. Now, for each item, we're actually gonna create its own input. So item input. What we could do is we could actually hard coat every single input for every single item. This will take hours. So we're gonna use, um, quo to work it out for us. Now, I'll item input we're gonna have Why scroll and inside are Y scroll. We're gonna have a start, and we're going to have and end. We'll update these values in the second. The next thing we need is a range. So if we scroll up here, where do we actually work out at the range? Well, it's outputs put have begun the scroll wider range. So let's copy that and let's bring it down here. And instead of saying the input don't scroll, why range? We're going to say the item input dot scroll y range and the item input dot scroll. Why end minus the item? Input does scroll. Why start? And this is really important. This means that we can specify a start and an end for each item. So right now we can hard code of value instead of being zero, we could say at 450 this is where I want my zero fraction to be and my infraction. I wanted to be at 800 when I scrolled 800 pixels down the page. I want my fraction to be one. And when I've scrolled 450 pixels down the page, I want my fraction to be zero. So let's start logging out some values. What I'm gonna do here is I'm gonna go into my html and I'm gonna comment art whole bunch of these doves Just that we have one div to work with. That means we'll only get one set off logs coming through. So as I scroll, is this working? Doesn't really look like it. Perhaps it's not scrolling that well, so we can just double check that there's no errors. Okay, there are some errors. So we just click on this Well say item and put that scrolled on end. Ah ha! That's because we spelt scroll. Why? Differently to y scroll! Okay, let's just change. Why? Scroll! Teoh! Scroll wine! They're gone. And now, as we scroll down, there we go. We'll see that our leaf is doing some slight movement. So what we've got your is? We've got our scroll range. What else do we need to do now? We need to work out our fraction value. Where do we work out? Our fraction value while we work it out over here. So we've got our scroll Wife Fraction. So that's copy and paste that and we'll say I to input that scroll Wife fraction equals and this is really important. We still gonna base it off the Global Input Scroll. Why current, which is based on the pages scroll. But we're going to say minus the item input dot scroll. Why start? I'm gonna divided by the item input dot Scroll, White range, Super Super important. The next thing that we need to do is we need to figure out a new output. So at the moment, we're using the global output and we're doing some calculations here. Let's go to our output and I will see that up wider current. It's calculated of show. So we'll just create new terrible here and we'll save our item output. Why current? Because we've got an item output already. So the fact that we only need one value means that we don't have to use an object. And here we can say I'll put wideouts start, which is great, because we're gonna still use our output. Why start and end values? And then instead of the input scroll for action, we're going to go for the item input Scroll fraction. So we've got our item output. Why currents Now we can apply it to our Why value down here? The thing is, is that output? Why current currently is a little bit inaccurate. If we scroll down on, perhaps we can just come into these, uh, elements back in As we scroll down. You can't really see it There were here, so let's increase all invented to something like 3000. As we scroll down here, we'll see that the items that are further away are actually moving rather quickly. We don't really want them to move quickly or appear to be moving quickly. So if we changes to 1000 perhaps you can see it a little bit better. So as I scroll down, huh, I don't really want the items that are further away to appear like they're moving Foster. So, like we said in the previous video, I actually want the items that are further away to move quicker in the opposite direction, which means, as I scrolled down and the document moves up, I want those items that are further back to move downwards at a quicker rate. So let's try this out down here. Where we working out ah y position. Instead of starting with the white currents and minus ing, the white current multiplied by the depth. I'm just going to start with the white currents and multiply the depth. This means that the deeper it is, the quicker it's going to move. Let's try this out as I scroll. Anything happening? No, but that's because we're still using our output. Why currents? So let's use our item offered. Why current and this is gonna be her item. There we go on. We're going to start at a range of 4 50 ended a range of 800. It's not. As I move, you'll see that things are looking a little bit better. And because we're scrolling between 4 50 and 800 we don't need to use this massive value over here so we can change us back to 300 as we scroll. There we go. Things are looking a little bit better. We change this to 500. Perhaps we can see a little bit more as we scroll. You'll see that the top item is actually going with the page as it scrolls up. And then the items that are further away are actually moving downwards as worse scrolling downwards. So the pages going up, we're scrolling down and the items that are further away are scrolling down, moving down at the same speed or quicker than items that are closer to us. Slower, complex. So now let's go back to our loop. And so what's happening here is that we're sitting the starts on the end. I'm just going to comment out thes two sections again, and we've just got one leaf, one parallax item so we can actually do some console logging here, So I'm gonna copy this I'm then going to go to our input. I'm then going to log are current scrolls. Let's go forward, scroll and then copy this and paste this. It was open a console and then we don't want to depth anymore. But what we do want is we want the fraction. So let's log this. There we go as we scroll for this item. When we're over here, you'll see that the fraction is a negative 1.26 kind of weird. But check this out as we scroll and you'll see that the scroll position is increasing. You'll see that the fraction value is really close now. And when we get to the value off 450 there we go. The fraction is zero. And when we get to a value off, what was it? Show 800. When you get to a very off 800 you'll see that the fraction goes to one or just above one. This means that it's moving between the start and end value that we've specified in our output. So it's moving between zero and 500 between a range or a scroll range off 4 58 100 this is super super cool. So now we don't want every single item to start at 4 50 end at 800. We want to start where it's kind of visible and end when it's kind of not visible. How do we do this? Well, one of the best ways that we can do this is say, item dot offset parents that offset top and offset parents is really important. And on CSS, you'll see that our position relative is declared. This means that this is an offset parent. It means that anything that has a position besides static is an offset parent. And inside our parallax container, we have our parallax items. So Parallax Item will say Who's my offset? Parents and the Parallax contender will say me I am, And then it will work out the offset top the distance from the Parallax Container to the top of the document, and that will be our top value, which is pretty cool. The next thing is sitting on end. We'll take this and we'll make it our end, but we're going to add the window dot in her height like so So we're going to say we're going to start at the offset Parents, That officer talk to the distance between the offset parent and the top of the document. And the end is going to be that distance between the top off the parents and the top of the documents plus the windows that inner height. Pretty cool. So check this out as I scroll, I should get to about here, which is a fraction of zero a scroll position on 319 And this is where our parallax item is going to be. So that's close. This on will do exactly the same. Here, check that out. Pretty cool, right? If we just do and undo basically commenting in all of our parallax items No, it's going to start in the middle here. And as we scroll down, you'll see that when we get to this position right show. Hey, it's also gonna be in the center exactly where we set it originally, which is fantastic. If you don't want to use the offset parent that offset top, that's OK, but what's really important is that you use something that doesn't change its position. Because if you're dynamically calculating the start and end values and you're basing it off of something that's changing. It's offset top things, then get really, really messy and confusing really quickly. So this way, if we just have to copy and paste a bunch of this clothes and put it into our next parallax container and our next parallax container, and we can change a bunch of these values and we can change this from Asset one to perhaps 60 and 61 on 67 and it's got on here. This changes to 2 to 1 on day zero and will change us to 11 to 21 to 41. And as we scroll down, let's see what happens. Alrighty. So they all appearing in exactly the right place as we get to their offset parent being at the top of the screen, which is fantastic. That's really cool. And I would encourage you to use that offset parent dot offset talk to get things to be exactly where you set them originally. And of course, you don't have to use scale, and you don't have to use blur. They just make things look a little bit more realistic so that basically all you need to know about scrolling, parallax and using the Parallax effect with a mass move event Well done. I'm gonna show you a few more things before I actually curd up an entire experience. That's not just examples, Sweets. I'll see in the next video. 12. Using Mouse And Scroll Position: you may be wondering whether you can use the mouse position and the scroll position together to change the parallax effect. The answer is yes. And in this video, I'm gonna show you how we scroll all the way down to the bottom. We're gonna a NCAA meant our piece of code that we commented out. So we're basically saying, Let's listen for the mass move event again. Likely, we haven't removed any of our code. We just need to move up here on day. We can just comment this back in there we go. But are why dot currents has been changed to make a work for the scroll position. So what we're gonna do is we're going to go up, Um, and we're gonna put in a new value that's put in an object like sun, and we're just gonna copy to start and then current from X. There we go. And the why we're gonna call Scroll. Why? There we go now. We need to create and copy and paste a bunch of the values that use the Y position throughout our code. Let's start off. Yeah, and we can say scroll. Why? And we just update that update that, then we've got a bunch of inputs, which is great. Then our output of here we can update input Scroll. Why output that scroll? Why range? Okay, then we've got output. Doctor Scroll! I start Put that scroll. Why? Range? Okay, I think that's about it. Fantastic. Let's just double check that this is moving so you can see this is responding to our mouths . Move on the X axis and it's responding to our scroll on the Y axis. But now what I want to happen is as I scroll up and down, and as I move my mouth up and down, I want the white accidents or the vertical access to respond to both. So how do we do this? The key lies in this piece of code right here. This piece of code that I've just highlighted This is our scroll piece of code. The next thing that I want to add here is some code that we removed in the previous video. I want to say out. Put that why dot Current. And perhaps you can just make sure that this is all embraced off, that we know that these are separate. I'll put the white dot current I'm going to say minus and braces again output dot y dot current multiplied by dips So we've got our scroll value of vision and then we've got our mouths value of Asia and we're adding them together. Check that out. No, as I scroll who looks pretty good Rights Nice. Sometimes these parallax items encroach on the other parallax items areas. A really easy way to fix this is to go to your CSS and weaken, say, parallax container. We can just sit this to overflow, hidden and just like that, when we scroll, it just hides behind. So there we go. That's how you use a mouse position and scroll position in the same document. It's really, really cool Ready funds to use both of them at the same time. 13. Other People's Code: Let's talk about using cord that you did not write. This could be using a plug in using some code you copied off the Internet or using something like J. Query. A lot of plug ins and frameworks are simply amazing. They're made by super clever people, and it makes our lives a lot easier if, like outsourcing part of your quoting to somebody else. There are plug ins made for developers and plug ins made for the general public. Wagons for developers may coating easier and more standardized. They also tend to focus on specific parts of the process and let you handle the wrist plug ins that are made for the general public or plug ins that say we do it all. I'm generally quite skeptical, and you may have to spend hours reading the documentation and guidelines to get anything working. The downside to most frameworks and plug ins is that a lot of the time you won't need to use all it has to offer. This is the equivalent off buying a tool sets and only using a hammer. Also, if the plug in you're using doesn't do exactly what you want, then you're stuck and you'll have to start from scratch all you have to do some hack work, which often ends up taking way more time than good planning and handwritten code. And then there's code written by other people. You can find this kind of crowd on medium in blood posts on stack overflow wherever. Sometimes this card is fantastic. Nothing wrong with it. It's amazing. Other times it's not great at all. The best kind of code for you is the card that you understand, and you make sure that it works for your project and your brothers that you're trying to support. 14. Putting It All Together: So I've shown you a bunch of stuff, many about inputs, outputs and the parallax effect. Now it's your turn to create something. Don't pressurise yourself into creating a big website using everything you've learned in the class. Take parts of what I've shown you and make a small project. Or make a few small projects, or just work on a daily when you're ready to shared with your mom with the world and with us, then sent through a link off something you've made. It can be on cope in or could be hosted using surge, get up pages or even your own website. If you need help, remember to share a link to your code. In the rest of this video, I'm going to create a little project off my own, using a few things that I've taught in the class. I've included this to show you that I'm not perfect. Development is hard. You'll see that I make mistakes and that I sometimes forget pretty important things. But I hope that shows you how riel development happens, and I hope this inspires you to create, to play and to experiment without the pressure to be perfect. So we'll have a quick look at my planning and what I've got is a container with a bunch of different leaves in it. And all of these leaves are gonna be parallax items. They're gonna have different deaths. There gonna be a bit blurry at times, but they're not gonna be scaled. They're gonna have maybe a random width and height, and every single leaf is gonna be randomly generated by JavaScript. Because I do not feel like putting in that money leaves inside of my HTML. And I definitely do not feel like styling them. They're gonna have a random rotation and random blurriness or a random depth, and they're all gonna be parallax items. Then on top of this container, there is gonna be a parallax plants worth an email inputs and a sign up button, and that's gonna be it. Let's get cracking. What I've got is I've got a couple of color values that I really like. Let's just start off with this body, Andi. I want a dark bodies and maybe let's go for black. BGC can be black, and also I'm gonna sit on margin two zeroes. There's no margin around my body. Let's get an example Leaf going and it's of a parallax container. And inside my paradox container, I went to Paradox Item parallax item and then inside share. I could have an image, but I'm actually gonna put the image on the background. Let's go for Don't Leaf and then it's gonna have a random background image. But we'll do this all in CSS Parallax Item and Paradox Container. It's copies into my CSS like so and this is gonna have a width of 100 V h and then heights off 100 V h. My worth will be 100 feet w actually So 100 VW 1/100 e h for my paradox container on position off relative, then my parallax item will be a position absolute Then for now we can have a with off 300 pixels height off 300 pixels and we can have a margin top of minus 150 pixels. And no, I don't think we actually need that. We just I need that you've got opposition. We've got our with. We've got off height. What do we need next position? Absolutes. Perhaps you can just say supper off 50%. Andi not bottom left off. 50% top left with height. Okay, let's go for all leaf. And this can have ah worth of 100% on a height off 100%. 10. It can have a background in the background is gonna be a your own. And one of the assets is gonna be one of these leaves. So let's just copy this one. Paste it in. There on will say, since ah, center nor repeats on in background size. Could be consign writing. I'm gonna like that on. Let's just double check that this is actually where once, uh, let's go for a background color off yellow. Yeah, that looks cool. And then my parallax item talk 30%. There we go. That's cool. We're gonna randomize the top on the left off every single item. They're all gonna be about 300 pixels high and wide. We can change that to make them bigger and smaller. We can take this away. No, let's get into some Java script. But what I want to do here Well, I want to sit up all off my leaves. So what I'm gonna do here is I'm going to randomly generate a bunch of different leaves and splotches. Whatever. So let's go. Four arguments. Let's do something. So let's go far, eyes equal to zero. And then I'm going to say, while I is smaller than, let's say 10 for now, then on. I never say I have plus, Plus, which means that increases in value already. Perhaps you could just close. This is not so much jarring as we're typing inside of. Yeah, what I want to do. That's right. Some comments. Well, first of all, I want to create a new elements, creates you leaf for inside elements, then add mm into container. Okay, then, after that, I want to say, um, run them. What? Right. Depth. What else? Drawing on row station background image. Okay, then. Just a blur on depth. That looks pretty good. So what I'm gonna do here is quickly put an idea into this div. That's gonna be parallax container. I also want to add the class names. Okay, let's try this. So what I want to do here, say var parallax consignor equals documents that get element by I d. On. This is gonna be my paradox Container credit. New element with a parallax item. Class name. Let's go form duck. You start create elements. Andi wanted to be a deaf. We're gonna say var I tone and what we're gonna do is give that item class name Really the same thing? Yeah, So I'm gonna create a leaf. I say this is a relief. Then we're going to add the leaf to the items are item darts upend child leaf, then at item into container. So paradox container dot ad uh in child on. We'll put in item. Let's see if that works. Now I've got to Yeah. Whoa! Okay, so I've got a bunch bunch of leaves happening here. That is fantastic. The next thing I want to do is just double check that These are all actually positioned. Absolute. Looks like that should be so. It's just right. Click and inspect Leaf. Okay. All the leaves are being added to the parallax container on there's just one parallax item . Okay, So saying, create element, which is an item. Documenta create element. Dev. Item class name is leaf. Uh huh. Okay, So the item class name is Parallax Item Lyft. Our class name is leaf item upend child leave and then Parallax Container Pin child item. Okay, so if we rock stick on this one now, you should see a bunch of parallax items all with leaves inside of them. That's great. The next thing I want to do is I want to get a random with high depth ratio background image or that kind of stuff. So let's go for item, not style dot with equals 300 heights to give a depth rotation on background image. So heights. Okay, They were going to go for depth, then rotation said this would be depth. This would be a that dot set the depth. Okay, They're in several sensation said this one view that will be transform. Okay. And then the final one will be a background image. So back ground image, and we'll get this background image of you here. Okay? They need a random number. So great far around him. Number girls math dot random then. Ah, what is gonna be Let's go full. That's a 600 multiplied by the random number which will give us a value between zero and 600 then plus 300. So that zero, then Hey, it will be 300. Well, maybe you can say plus 200. And maybe you can say this one's 500. Okay, on. Obviously, these are gonna be worked out first. So that's just given some braces. The depth is going to be a random number, and that's just gonna be between zero and one. Then I'll transform what we want. You. We want something between zero and 360. So that's got 360 No supplied by a random number and then I'll background image. We want one of these between Let's see one and 91. All right, let's try it out. And for my BD image number once mine random number multiplied by on it's going to be 90. I think so. Anywhere between 90. But I must say, I want to see what that is, actually. So this has put in to for now, Fiji image number. It's been about console. So the 64 point whatever. Okay, so what we can do here is you can say meth round and this will give us six. Fantastic. So why don't you just love without console the log DJ number and that should give us a bunch off different Bijie numbers. Okay, that looks pretty good. Changes to 91 I think should be OK already. So then we can put all B G number into him. We could have done the same with this calculation. Yeah, maybe we should try that. Let's go. I put this up Here, take this away. Let's say, um, take number and company face that we can do the same with all of these, actually, but sometimes it's unnecessary. Okay, so it doesn't look like I'm getting random plants. No, it doesn't really. Does background image actually exist? Mike Lika, inspect parallax item. Well, that's because we need a put on our leaf. Let's say leaf the background item. See if that changes anything. They've got style, that background image. It's inspection. No, it's a dotted depth. Transform, rotate. So perhaps we need to do some research about hotter. Put a background image onto 19 with JavaScript, so let's go for Java script, background, image, background, image. Ah, because we need to put a your role in yeah, again. So let's try that. So say you're wrong on, uh like so Oh, like so Come of that. Don't understand what you're saying, Okay, so all of this you are? Oh, one of these. Let's just put that there. Okay. Looks like we have some random background. Image is fantastic. Thanks so much. W three schools boom. What's next? Well, we need to work out our blurriness, So let's go for itunes dot style dot filter he close blur off 20 pixels. Okay, there's a whole bunch of blur happening there. Andi, we've got our depth or ready. Where is all depth? Here's all depths and maybe we can save our depth equals random number on and we can say, OK, what is our blow value? Serve. Our blur equals are dips on. We kind of need a start value here, sir. You say that I'll put that blur dot start and then multiplied by the output. Don't blur duck range. Okay, now, we obviously don't have these values, so it's that set them up. It's girl and say, set up. I'll put on the fire. Output equals on our output is gonna be blur on going to have a start off 0.2 and the range off 20 About that, I put blood start in range, upper plus start in range. So what happens if we changes to five? Then what happens? Okay. And if you have to say, start at one, I'm expecting all these. Be non blurry. All right, so that's not working on items style that falter. Blow 20 pixels. That's because it's all just 20 pixels there. That's changed this to blur value. There we go on. We can put a popular PM for the other variables that's changed out stocks. Is there a point to again? And I arranged to 20 on. Hopefully we'll see some of these being blurry and some of them not. And then maybe I can change my worth to I don't know, 50. So between zero and 500 yeah, the minimum will be 50. I'm not start faulted Blur. I can put that up there. Okay, It looks pretty good so far. What else do we need to do? Got a blur? I've got a randomly for sludge. I've got random within heights. I've got random depth and blood now. I guess I need a random position. I don't think I've put that in. Actually, let's go for item dot Style toe tuck equals on. We can say Where is this random number Not supplied by Andan. Say, when there were dot inner heights. Cool. And then Well, no doubt in ah, with for my left value. And then we're going to just at a pixels to that. Okay? And then we may need to run this. Not quite sure, but let's just do it anyway, just so that we don't get any. Just that we don't get any point values. Alrighty. So let's certain inspect this now we have transformed falters Top left. Okay, a bunch of stuff happening. Well, that is fantastic. But maybe we can also just we can say math around minus 200. Well, sir, And that's just so that the items go a little bit to the left, a little bit to the top. Otherwise, they always go to the right and the bottom of the page. Then we can also put a overflow hidden on our parallax container so that we don't have any scroll bars. Okay, so we've got random positions now. I think we need to make them move, so let's make them move that set up, out and put on share. Perhaps we can say set up html we're gonna add He's semi Curlin's as well. So input is gonna be most ex Andi Moss. Why? Okay, And then we're gonna have I'll start off zero and end off window dot screen. I always do that one, no doubt inner with and then our currents. We can just start at window, you know, with multiplied by 0.5 and then we need a range which will work out afterwards. So we can just copy and paste this. Okay, they would say input dot mounts X duck range equals and put that mouse x dot and minus this Just copy and paste that start. Okay, These things are freaking me out. Go away. Why? Why why? Okay, so we've got our input set up now. What's next is we need to do our event, listeners. So perhaps you could just Hi, this one on on you can say window dot ad event all the snore list Honor Onda se miles Move , Hanno mouse Move! Okay, then we can also add a resize resize hand. Oh, resize And don't quite know why I spoke Handle like that But I did handle most move We can say and resize one needs to happen in our resize. We need to do our range. I'll end a range and yep, that's good. Then I'll handle mile smooth. What happens in our handle? Mouse move. We need to do input fraction the current and then outputs currents and then apply to HTM own. Okay, so it's careful are update inputs, which is a function, and just copy and paste this on, Say update outputs like so And then we can say updates Parallax items. Okay, how we can just copy and paste thes fantastic. What we first need to do and up it imports is all current and our fraction. Okay, so let's do that update inputs What we gonna get? Just So let's get our events on will say milestone X equals even dot client X And we haven't set up our mouths yet, so we can't do that right? Shot of our mouse equals x zero. Perhaps we can say when no dot inner heights inner with multiplied by 0.5 ongoing copy. That's for ah y value on, say, in her heights. And if we just cut this and put it at the top, we can actually reference that Oh, yeah. So is in most X. Andi. Most are. Why? Pretty cool. The next thing we need to do is copy and paste. This miles wide is our pliant. Why? The next thing we need to do is work out off fraction values. So we go. Actually, this doesn't go here. This goes Don't. Yeah, on this goes down here. There we go. Then we can actually update our current values. So import dot mouse, extra current. Because amounts that x on and put the mouse. Why current tickles, mouse thought. Why, then I'll fraction value input. Done. Mouse x dot fraction. And this equals r currents minus are start divided by a range. On. We put these inside of braces. Now we change us to most. Why? Fantastic. So we've done all inputs. That's great. Now outputs what we're gonna do for outputs. Well, we need to do our X And why It's careful output dot x Do we haven't X yet? No, we don't sort of this. Careful, x and we'll have a start off a minus 1 15 and an end of 1 50 and then a current off zero and we'll copy and paste this changes to why? And then we'll just copy and paste thes continues to x x x, Mr Why? Why why? And this too I put Alrighty. We've now got our X and y are put. The next thing we need do is actually carry on. Yeah, and say dot current equals on our current value is gonna be our input The mouse. Extra fraction multiplied by our output dot Exe done range. Pretty cool. We probably don't need to do this, but I'm gonna do it anyway. It makes life a little bit easier. So why current mouse, wife correction and export and our put duck. Why range? Okay, So now input outputs. The next thing is, we need to apply to the HTML. What I've been up here is I've set up the HT mole, but I haven't added it to an array. So let's say items array equals a blank array. Then what I want to do is far item when I create it and I give it a class name, I want to say items array dot push, and I'll just add this item to that array. Then I can reference it later. So items array, Let's go dawn to here. I seems ready dot For each and inside of this For each I'll provide a function, Andi item on K or item and I And then what I can do is Aiken create ah, far item out put equals an object and there will be an X. There'll be a why on, And that's actually gonna be it. Just my x and y. And then I'm going to say I turn well, I two dot style dot transform equals translates. And then we'll say 20 pixels. 20 pixels. Okay, then I'm also gonna have a depths of our depth equals item dot datta sit dot depth. I'm gonna say parse float. And we probably don't need to do this because we're actually generating that number appear on. We could stall that on the item itself. But I think this is just a nice way to put into html and bring it back just to cement what you guys have learned during the class. So that's how depth on we're just gonna put in the 10 value. We got depth, but I'll item output. Let's make this dynamic first off without output dot Exe current and then multiply it by our death, right? I don't think so. Something looks a bit off. I think I might have to do with this value up young. I think I might actually have to start with are out. Put that starts dot Exe that start. Plus this fatty Yeah, that looks about right. And then we'll do the same thing over here. Said this will be our why value and still put braces. Iran. Yeah. Okay, then our X would be are up with ex dot current What? It currently is multiplied by the depth on the stump check. Now, let's copy and paste this. So, uh, put white our current It's pretty much the same thing. And then we can put this to Yeah, that X on a copy and paste. All of that se item are put duct. Why? Okay. So hopefully that should work? No, the whole bunch of stuff not happening doesn't look like it's even recognizing that I am moving my mouth. So it's going view. Develop a job script console. I cannot said property transform off under find. Okay, that's his item, not styles. Styles definitely doesn't work. So let's go for I do not style. Save my pen. Okay, So things are working. Yeah. Can actually remove this or just comment this art. Okay. It doesn't look like there's much rotation happening. Yeah, so let's check out our rotation irritation, I think isn't working because we've said it to our item. When we went for this rotate every time these images move. Yeah, it means it overwrites that. So let's change this to a leaf. All right? Okay. Perhaps we could just part down the blur a little bit. Let's go to output blood. Let's make this 10 and has changes to five. Okay. And then where I set up my age tomorrow, this maybe change this to, like, 50. There's not gonna be 50 leaves and splotches and whatever else and doesn't really look like they're randomly positioned. It looks like they're just position from top left to top. Right. It's kind of weird. So if we go for talk and left in her heights in the woods Yeah, that's just weird. So let's maybe look this say Aye, dimensions. Just careful. It's up on left. Let's go for all develop JavaScript console. Ah. So the problem is is that what's happening is as as the items increase. So the top on the left values increase, giving it, like this really even spread from top left to bottom. Right. So what I'm gonna do here is because they're relying on this random number of here. I'm just going to copy and paste that and use a unique random number for the top. The left, um, transformation Onda worth on the height. Actually, I was going to use math at random all over. Sure. Who is there? A tape number. Let's put that down there too. Okay. So random number Do you exist anymore? Depth is still random number. Okay, But we can just change that on that. Should be it. No more random numbers. Okay, so we now have a burn off leaves, which is pretty cool, right? Well, they move a lot. Something to sentence seem right? Yeah. Yeah. What is the matter? Well, I think it has something to do with out current. They were starting at the start, and then we're saying the mouse x fraction multiplied by the range, starting at the range, So perhaps could say and minus and minus. Let's see how that works. Then our exes are put, X currents multiplied by the depth. Okay, that looks a lot better. Pretty rad. Let's change. I'll blow values again. Started their 0.5 to say started their point 35 and our range could be to 16. And the only thing we haven't done is off Z Index. So we need to do our Z so we can work this out and say var Z Index equals LZ range so you can say output dot range, which we haven't set up yet Minus are depth multiplied by our put dot zed dot arrange. I put that is, they don't range. Let's go and do that. 10,000. That looks pretty good. So range, range. Now let's sit it. Item that style dot Z index, Close the index. Uh, so do you see what happened there? Re sizing things, Not really working that well. It's update that, sir, on my resize and and range, let's go form input dot most ex dot end equals we know dot in her worth. Fantastic mouse. Why is in our hut cool and then we can copy and paste, not outputs, but I'll input ranges. Don't here. Fantastic. Let's see if that works any better. Okay, that's looking pretty good. It is a bit of a mess toe, so maybe I could select my image is a lot better. Or perhaps we can just reduce the Blur, gain somebody else. Was there a point to, let's say, 10. I guess it is quite random as to what pops up. And I bet you if I took all the blur off, it would be a lot more performance. So if we go and find the blood so style dot blur or style that full tone, this one here, she's coming this out. Yeah, that feels a lot better. Okay. And I wonder if I can change this to a percentage, the top and left, rather than being actual pixels. So that changes to a percent. It's a method a random multiplied by 100 minus 10. This means that'll work no matter what the window height and width is. And if it gets resized. Okay, let's change the amount of elements that we have to like 100 or something. Okay, maybe we can even say minus a little bit more. Here. So minus 20%. Okay. Yeah, that's looking pretty good. I would like to see how many leaves I can actually put in. Yes, or maybe no scare for 1 50 It was like a flipping jungle here. Yeah, that's really cool. Maybe you could just listen that. Let's go 1 30 Okay, so there's lots of movement happening here. What I need to do now, I need to put in my the rest of my age, Timo. So let's go for Parallax Container. And on top of this, I'm gonna put in my for container. And she has spoken. Tina writes, okay? And inside share, I'll have a form. And inside my form, I'm gonna have an input to the type of text. I don't really need a name. And I d right now and then an input type off submit. I'm going to say sign up. We can give us a place holder value off email address on outside of life. All we can have an h one saying Parallax Plants newsletter on hte to this is please Splenda . Okay. No, we can just style this. Send us care for our form container and will say what is 100% will say height is 100% on. Well, maybe we'll just say 100 the W and 100 V h. And they will say Position absolute on top zero left. Zero. Okay, we can also then said it's display. Flex on and say Justify content. I will say center on a line. Items also center and they would say, Lex direction Roy can change it to calm Then my body. I can say fun family. I would like to be open sounds. I think bourbon Sands open signs great. And then my h one. Let's just give it a color off whites and we can say Take shelter zero zero 10 pixels. Rgb a Sarah's there. 0.5. Okay, perhaps we can change this to four pixels as to 20 pixels and we can make this even DACA 200.8. Yeah, that's great. And can say fun size off 50 50 pixels, maybe 40 pixels. And then our h two can pretty much be the same thing. Except it will be 20 pixels can change the margin to zero on the margin. Teoh zero to cool and then I'll form same margin top off 20 pixels. Fantastic. And then our input. It is a type equals text and I put Thai Peco's cement. And here we can do the same thing as our form. Container can also just said the display type to flex inside of our phone since the center . But we can go for row here. Yep, like so Save border on and say outline none. That's a box sizing. Four bucks would say padding is 10 pixels. That looks pretty good. Maybe 10 pixels. 20 pixels may weaken, say, 10 pixels. 12 pixels. Like so. Okay, well, maybe we could even just give this a height off. Say, 40 pixels. Yep. I'll submit. Can have a height of 40 pixels. We can also say, um BG organ say bordeaux off none. Okay. Aligned on curso are 0.0, on my background color Scroll down to get some nice callus here. I want the pink. So it's that in. And then give this a padding off. What we say him 10 and 12. Okay, Maybe you can give us a bit more fantastic in the him. Fun size could be 16 pixels. Same thing. Yeah, on our killer could be black. Andi for weight can be bold. Okay, Color Shuriken Most people lack. Yeah, that looks pretty good. What I would like to do is I would like to see if I can add drop shadow on the leaves without making it super slow. So let's go full tone and Trump shut down. It's might have to be inside of courts. That is just double check. Ah, no, Cesar reserves are zero. Is there a 0.5? Did that do anything at all to think so? That do anything at all? I don't think so either. So falter and drop shadow drop shadow like that? No, I don't think so. So what about CS Is full toe drop shadow drop shadow. Ah, no comments. So to do. How about that Working at all? That's one. It is working, but it is a group of slow. Okay, so let's take that out quick for my computer breaks. Okay, so we're back over there, So I guess with the player and the drop shadow, things aren't soy performance. Then we have our parallax plants news it a sign up, and yeah, as you move your mouse or these plants move, there are some words plunges and the characters here and there. But it's pretty cool. And all of this is just really easy to change and set up, so we can change us to something like 300 to make it even more responsive. Yeah, it looks pretty fun. Oh, no wound. Okay, so that's my parallax Plants newsletter. Have fun creating yours. If you want to change the view you can go to, I think full page, uh, still has this little Bob. Perhaps you could go to a live you. Now my images are massive. That's why it's taking so long to load. But this is pretty cool. Yeah. So this quite a bit of space at the top. Still, so perhaps we can change this. So let's go to editor view on bits. Scroll down until we get to our items. Ray, I think it's about show. So let's go for 40%. Yeah, let's try that 40% on its re freshness. Maybe we look a lot better if I didn't have a bunch of my splotches like these big things. Yeah. All right. I like it. It's a lot of fun. Everything Is pai relaxing really nicely to really nice way to Yeah, to have a newsletter sign up page. Cool. 15. What's Next?: So that's it for this class. Thank you for taking it. I hope you had fun. I hope you've learned a lot, and I hope you want to do some more. Quoting. The thing I want to leave you with is that this is only the beginning. Interaction designers super fun. And in the Web world, it's certainly the funny side of JavaScript. There's a lot more to learn, and there are certainly a lot better, quicker and more elegant ways of writing code than how I've coated in this class. My aim is being to make everything as simple, and it's easy to understand as possible. If you have any questions or want to discuss anything, please do so in the community area or reach out to me on social media. And if you enjoy the class, please give it a review and share it so that other students confined it and benefit from a two. I've also got plenty more classes in the pipeline, so if you like the way I teach, follow me on skill share and on social media and check out kept up kaboom dot com. Okay, by phone all and I'll see you soon