Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
yeah fairlight performance I've always been really into parallax I mean it's really it's really hit these days to hit on it and there's times when they that's done really poorly but I like the effect and like personally I i like i like
long single pages and i hate it when I'm like working on a project and someone's like well let's break it up into multiple pages and I'm like because I was that baccardo Jason he he's in Massachusetts he said something like a click is the
decision but scrolling is a continuation and I feel the same way like usability wise i just feel like scrolling is like extremely low barrier to entry right it's just like i'm continuing and then when you augment that's rollin experience with parallax
i think it's cool but anyways there's many ways to fall into a pit of badness with parallax and so i'm going to show some examples where that's happened and try and talk about techniques to avoid that sort of situation but like i said i've
been into it for a while in 2001 i just pointed to this site because i thought was pretty rad so like it's like this one and it's italian site and I think it's just selling shoes but like they kind of got this thing floating in front you know its
parallax is what we're going to talk about but first I think there's a little bit of terminology we could discuss I recently asked kind of like how we could break up some of these things because parallax generally gets use the word gets used for anything
for any site that has an effect on scroll and I think we could make it up a little bit more so let's try it out this way parallax moving elements in different Z layers along with the natural scroll pace so come on come on yeah this a classic example and
really the first example was the nike better world site so this was designed by ian cole whole a Kian coil out of the UK and he is generally the designer credited with creating the parallax technique and at least popularizing it on this site so that's
generally parallax peeler is another site another kind of technique that we've seen more recently a good example is here and this is actually I think where the name is kind of coming from this is a concept video from the Canadian agency tehan and lacs
but as you kind of scroll down the the article kind of peels out of the way so you peel through content in fact this technique also I believe might have debuted on edits quarterly com which was as well designed by Ian coil so the man really likes augmenting
the scroll experience with some good stuff alright lastly scroll jacking scroll jacking we've seen a little bit more recently this is kind of taking over in the natural scroll of the user to display an alternative page velocity a classic example of this
is the Milwaukee Police newscom which takes a while but it's so worth it come on I really yeah let's try it so all right it's going to scroll a little bit uh-huh that's good actually oh it's working pretty nice bring it up on your own sometime
in in many cases it scrolls to like halfway through the content so showing like two pieces all at once that's a good example so they add some work to do but honestly i think that the design is done well but it's a little tricky to pull it off when
you want to completely yeah overtake the scroll like that alright so that's a little bit of terminology but we're talking about performance and so we're really talking about jank jank is like you are scrolling everything's supposed to be smooth
you're supposed to be able to scroll at 60fps if you know a basic site can do that but the more you throw out the page and the more you kind of inter with JavaScript the more you're going to introduce jank so typically when there is jank during a scroll
it's caused by a thing that we usually like to call paint storms paint storms the term has kind of been around for a while and it generally means there is just excess painting like more painting that should be happening to the page and show so I'm
going to kind of try and visualize this actually looks like when I come back to this example over here and I just open up the devtools what I have you hit escape and you kind of bring up this drawer down here which usually has a console but has a few other
things inside the rendering tab there's show paint rectangles show composited layer borders and show FPS counter and I'm going to make good use of the show paint rectangles now and basically we're seeing these green overlays happening on the screen
all the time if I take let's see this is just a static page and I'm just going to open it up the same thing we have green over on me on the scroll bar because the scrollbars is having to be redrawn but the content itself is not being redrawn right
so similarly I'll take a inception explained looks like it's over here cool site kind of parallax II kind of effect on a lot of this and if I take a look at what's happening so they have orange borders around all of the composited layers and green
[ ... ]
Nota: se han omitido las otras 2.569 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.