Transcript

00:06 So here we are in the downloadable demo project here which I've just
00:12 previewed in Safari on the right hand side of the screen you can see the code
00:16 for the page - don't worry about the code all we're going to look at is the
00:22 translate3d line here. Now, that's the position of the watch which
00:28 is in the scroll mate so you can see that when we move the page up and down
00:34 that has now gone to minus 100% on the X And back to 0 again...
00:40 into its normal position the point being is that you'll notice that even though
00:44 this comes in nice and smoothly and we've got easing applied to it
00:48 the JavaScript that's controlling its position is very quick it's doing a
00:54 couple of movements if we go very slowly over that range of 1% you can just see
00:59 those values moving and that's because ScrollMate is using CSS for all its
01:05 easing and smooth positioning. The JavaScript part is only ever doing a
01:12 tiny amount and that it's the JavaScript part that takes up a lot of the
01:16 processor in the browser and starts to make pages go janky. When the browser can
01:21 use its own CSS processing to move things and and ease things it's a lot
01:29 smoother so the bottom of this watch is moving in between 0% and 1% of the bottom of
01:36 the screen. Let's have another look at the next example now this one comes in
01:41 the same but it's got a nested scroll mate arrangement so the second scroll
01:46 mate then at about 8% of the page so about here it then starts sliding it
01:52 left proportionally so it comes in like that that's a very small range with some
02:00 easing so it's a quick trigger and then a proportional slide okay so let's
02:07 look at the div for that one and see what's happening. So we can see just like
02:13 the first one it will come in and then this
02:19 is this is the outer ScrollMate that you can see if we look at the inner one you
02:24 will see it'll come in so there's our 100% - you see just there
02:29 like the last one did goes to 0% percent so then it's it appeared;
02:34 0% percent back in the place it belongs on the page and then it's animated all the
02:39 way up the page so you can see as I scroll this x position changes with
02:44 scroll but again we're not doing the easing with JavaScript we are
02:51 positioning it where we want it so that's moving with the scroll but you
02:54 can see it carries on moving after all the the fancy eased positioning, all the
03:01 smooth slide is done with CSS and you'll also see then that when this
03:06 goes off the top of the screen there you go it doesn't do anything it doesn't
03:12 keep writing 100% to it - doesn't position anything that's not on
03:16 the screen and likewise when we when it comes back off the bottom it's not
03:20 and then nothing happens so that's the reason that scroll makes nice and
03:25 efficient and you can have lots of these effects on your screen without causing
03:31 the browser to go janky and even without causing mobile browsers to go janky as well."}]