Episode 146: Dropdowns, Scrolling, Motion Blur

I'm Nick Pettit >> I’m Jason Seifer 0:00 >> And you’re watching the Treehouse Show. 0:01 Your weekly dose of Internets, 0:03 where we talk about all things web design, web development, and more. 0:04 >> In this episode, we talking about drop downs, scrolling, motion blur and more. 0:07 >> Let's check it out. 0:14 [MUSIC] 0:15 First up, is this really cool article about how to make a mega dropdown. 0:20 Not just a regular drop down, a mega dropdown. 0:26 >> Do they have, like, any lesser degrees of that? 0:28 >> No. >> It just goes straight to mega? 0:31 >> Yep. >> All right. 0:33 >> It escalates pretty quickly. 0:34 This is- >> We'll go with it.- 0:36 >> Something that you might see on, 0:37 like, Amazon or a website that has just a ton of categories and 0:39 subcategories and needs to work on mobile and has all sorts of requirements. 0:43 So, this is for really big sites. 0:47 This is not for you know, a one pager or 0:49 something like that where you just have a few links. 0:53 >> Mega sites, maybe. 0:55 >> That's right. 0:57 So, let's take a look at the demo. 0:57 And, up here on the left, we have this drop down, here. 1:00 So, I'll click it. 1:04 And, you'll notice that clicking on it is what actually activates it. 1:06 You don't hover over it and activate it, you have to actually click. 1:11 And then when you hover over these sub categories, 1:15 you can have all sorts of really nice layouts like these ones. 1:18 And you can even have maybe a few sub categories as well. 1:22 It's pretty robust, and if you've ever tried to build a drop down menu before 1:26 you know just how difficult it can be. 1:32 It seems kinda simple, but there's actually a lot to it. 1:34 So let's go back to the article here and it says this is a responsive and 1:38 easy to use customizable mega dropdown component. 1:44 I read some of those words, right? 1:48 And they have a little animated GIF of what it looks like. 1:50 We saw what it looks like on desktop, but they also have a really nice animation. 1:53 It shows you what it looks like on mobile, and 1:58 the idea is that, like I said, you want to click on it to actually activate it. 2:02 If you do want to change this particular dropdown to work on hover, 2:07 you can do that. 2:12 It's easy enough, but this is mostly a user interface or 2:13 user experience decision that they made, where you want to actually 2:19 click it to activate it because it could be a little bit easier to use that way. 2:23 And really clarifies the users intent much better. 2:28 I like it on mobile because, and they mentioned this in the article. 2:32 That it takes the full focus of the screen and I think that's actually kind of a nice 2:36 move on their part, because on mobile screens, obviously there's less space. 2:41 So just making the decision and saying yep, if you tap this, 2:47 it's just going to take up the whole screen, really gives you kind of a lot of 2:50 leeway in other types of decisions that you might make and 2:55 allows you to have those robust layouts for the menu. 2:58 >> It was a mega-good decision. 3:02 >> It was. 3:04 So all the code is there. 3:05 They also have some slight variations for how it might look on tablet. 3:07 Definitely be sure to check this one out, because like I said, 3:11 making these types of dropdowns is notoriously difficult. 3:14 So if you could find a really good one like this that just works you should 3:17 definitely go with that. 3:20 >> Yeah, it's mega cool. 3:22 >> Mega cool. 3:23 >> Next up, we have a project called ReadRemaining.js. 3:24 This is a very very simple jQuery plugin that tells you how much longer 3:28 you have to go when reading a page. 3:33 >> Oh, nice. I have like a one second read. 3:35 Hey, hey, that was pretty quick! 3:37 >> Yeah, that was the one second. 3:40 >> Wow. Maybe, okay, so 3:42 you might not need this- >> No. 3:43 >> This plugin. 3:45 But let's go ahead and take a look at the demo. 3:45 If you look at the top left, 3:47 it shows you in this little div right here how much longer you have to go. 3:49 Now, the centered one is what I prefer as you're scrolling. 3:54 Scroll down a little bit, plugin doesn't work, just kinda wait, 3:58 see what's going on. 4:02 Hey, nothing's going on. 4:02 Let's scroll down a little bit more, see if anything happens. 4:03 There it is. 4:05 It says we have two minutes and 4:06 six seconds left to read the rest of this block of text. 4:07 >> So what happens if I don't make it in time? 4:12 Is this a self-destruct type message? 4:14 >> Yeah, you're gonna be quizzed. 4:16 Okay. 4:17 >> Sorry, your computer actually destructs 4:18 if you don't make it to the end of the article in time. 4:22 It's an option, you can disable that, but why would you? 4:25 >> Yeah it's good motivation for reading. 4:29 >> Why would you? 4:31 So anyway, really easy to use, just drop the script in CSS in your page, and 4:32 then call read remaining. 4:37 Now if you want to customize it, you can. 4:39 It let's you customize how longs the gauge delay is, 4:42 so as you're scrolling down, if you want it to show it immediately, just set that 4:48 down to a very low number, show it on start and the different time formats. 4:52 Anyway, quick plug-n, but if this is something that you would like to have 4:58 on your page, go ahead and check it out. 5:02 >> Very nice stuff. 5:04 Well, next up is a motion blur effect with SVGs. 5:05 So, let's go ahead and look at this demo. 5:10 And, so far, so good. 5:15 There's a little carousel here. 5:17 We've seen that before, but watch what happens when we swipe through here. 5:19 Woah! >> Why don't you 5:23 swipe a little slower, Nick? 5:24 You're going to get a speeding ticket. 5:25 >> So if we actually just kind of wobble this back and forth, 5:27 you can see how there is a motion blur effect. 5:31 It's a little bit hard to see maybe on video because you can only see it when 5:35 it's actually moving. 5:39 >> And because it's blurry. 5:40 >> That's right, and it is blurry. 5:41 But I promise you it is there, so you may want to check this out. 5:43 On your own in a web browser, but 5:46 it's applying this motion blur effect to the left and right. 5:48 It's a little bit easier to see in this picture. 5:53 It's actually blurring this image as you move it back and forth. 5:55 Now, why would you want to do that? 6:00 Well, sometimes say in motion graphics, 6:01 you can add a greater sense of motion when you add a directional blur like this. 6:05 And on a web page, where maybe the frames per second aren't as high, 6:10 you can actually get away with lower frames per second in some instances with 6:15 a motion blur like this, because it sort of interpolates the frames that you 6:20 don't have and shows you what it would actually end up looking like. 6:24 So you get that nice blur effect. 6:29 Now, something to point out before I get into this. 6:31 Is that attention, this is highly experimental and 6:33 it only works in some modern browsers. 6:36 And Chrome seems to have the best performance. 6:39 So, if you are looking at this, 6:42 be sure to check it out in Chrome, that seems to work the best. 6:43 So, this is a motion blur effect with SVG, and 6:48 if you know anything about the CSS blur filter, 6:53 you know that it doesn't have a directional blur. 6:58 So we have to actually create this ourselves using an SVG filter, now 7:02 there's another article linked here that covers that in more detail so if you don't 7:07 know about SVG filters, be sure to check that out because they are pretty cool. 7:11 So basically they just apply this GaussianBlur filter as a primitive. 7:16 And then they manipulate it a little bit with JavaScript and 7:24 they're actually filtering every single frame to get this effect. 7:28 So, it's a little bit more complicated than that. 7:34 There's actually quite a bit more to this. 7:36 But definitely be sure to check this article out, 7:39 because it is a pretty fascinating technique that I have not seen before. 7:41 It's pretty original. 7:46 >> Yeah, it's really cool. 7:48 It looks great, too. 7:49 Next up, we have a project called ScrollWatch. 7:51 This is a piece of JavaScript that will allow you to attach events. 7:53 Based on scroll position in a browser. 7:59 So, what does that mean? 8:02 Let's go ahead and just see how it works, first. 8:03 Scroll down to the bottom of the page, here. 8:05 Now, if we look at this little box, right here, 8:08 we can scroll the page to see ScrollWatch in action. 8:13 And as we are scrolling, you'll see the text gets faded in a little bit. 8:16 Now you can do more than just fade in text. 8:22 It works with pretty much any container. 8:24 Here's one for infinite scrolling, and 8:27 as we scroll down the page it says, I am lazy and late to the party. 8:29 Now this element is being added each time we get near to the bottom of the page. 8:34 You can do more then just add elements and there's actually quite a bit you can do. 8:40 You can watch any element and you can even multiple instances of this. 8:44 Now what's really neat about it is it gives you 8:49 an event to attach once the element comes into frame. 8:53 And then you can also give it options to throttle, wait a certain number of 8:57 milliseconds before doing something, and then here's this event onElementInView. 9:02 Attach any function to this and you are pretty much good to go. 9:07 Customize exactly what happens. 9:11 So there are a lot of things that you could use this for, use it for 9:13 infinite scrolling, effects, just tons of different things. 9:16 If you're in need of a plugin to use for something like that, 9:20 definitely check out scroll watch. 9:22 >> Very nice stuff, well next up is how to vertically center a clipped image 9:24 in CSS, so let's just, right off the bat, what does that mean? 9:29 Sometimes, when you serve up an image in CSS, 9:35 it could be cut off at the top or bottom, so 9:39 maybe you have a certain height that an image needs to fit into. 9:44 But you don't wanna resize the issue and 9:48 sort of crush it into this horizontal tiny little box. 9:50 So you need to either cut off the top or cut off the bottom, and 9:55 it can be difficult to actually just get it right there in the middle. 9:59 So what this article describes is how to calculate an offset, 10:04 and then use the top and transform properties to move it into position. 10:11 So, for the actual image, once it's already been cropped with a wrapper, 10:19 you'll set the top property to the value of 50% and that will move the image down. 10:25 50% of the wrapper height, so that will get your vertical centering. 10:31 Then you use transform with the value 10:37 translateY and that will actually move it toward the middle. 10:43 So you have that at -50% and that will move it inside that wrapperdiv and 10:49 put it in the middle, and then you'll get something that looks like this. 10:55 And no matter what image you use, 11:00 it'll actually just show you this picture of a wolf. 11:02 >> That's very useful. 11:05 >> Which I kind of like because I really always need that on my websites. 11:06 >> I had to pause when you said that to make sure that was correct. 11:10 >> I got nothing. 11:16 This actually will work. 11:17 >> I mean, if I were really using that in production, 11:19 it would give me claws for alarm. 11:21 >> This will actually work all the way back to IE 9. 11:24 >> Look at that pack of browsers. 11:27 >> It is a pack of browsers and it will work on Firefox way far back, 11:30 Chrome way far back. 11:35 So, it actually has pretty strong browser support. 11:35 It's definitely an okay technique to use and it's pretty good. 11:39 And that way you can go ahead and click on something like that and 11:44 actually see the full image there, if you want to. 11:47 And go back. 11:51 So, pretty nice stuff. 11:52 I really like this technique a lot. 11:55 >> I thought those jokes would have had you howling a little bit 11:57 more with laughter. 11:59 >> That's all we have time for this week. 12:00 I am @nickrp on Twitter. 12:02 >> And I'm @jseifer. 12:04 For more information on anything we talked about, 12:05 make sure to check out the show notes right below this video. 12:06 Thank you everybody for watching, and we'll see you next week. 12:09 [MUSIC] 12:13

You need to sign up for Treehouse in order to set up Workspace

Sign up