1
00:00:00,320 --> 00:00:01,980
I'm Nick Pettit
>> I’m Jason Seifer

2
00:00:01,980 --> 00:00:03,710
>> And you’re watching the Treehouse Show.

3
00:00:03,710 --> 00:00:04,950
Your weekly dose of Internets,

4
00:00:04,950 --> 00:00:07,940
where we talk about all things web design,
web development, and more.

5
00:00:07,940 --> 00:00:14,200
>> In this episode, we talking about drop
downs, scrolling, motion blur and more.

6
00:00:14,200 --> 00:00:15,296
>> Let's check it out.

7
00:00:15,296 --> 00:00:20,336
[MUSIC]

8
00:00:20,336 --> 00:00:26,090
First up, is this really cool article
about how to make a mega dropdown.

9
00:00:26,090 --> 00:00:28,830
Not just a regular drop down,
a mega dropdown.

10
00:00:28,830 --> 00:00:31,690
>> Do they have, like,
any lesser degrees of that?

11
00:00:31,690 --> 00:00:33,410
>> No.
>> It just goes straight to mega?

12
00:00:33,410 --> 00:00:34,140
>> Yep.
>> All right.

13
00:00:34,140 --> 00:00:36,170
>> It escalates pretty quickly.

14
00:00:36,170 --> 00:00:37,650
This is-
>> We'll go with it.-

15
00:00:37,650 --> 00:00:39,330
>> Something that you might see on,

16
00:00:39,330 --> 00:00:43,140
like, Amazon or a website that
has just a ton of categories and

17
00:00:43,140 --> 00:00:47,560
subcategories and needs to work on mobile
and has all sorts of requirements.

18
00:00:47,560 --> 00:00:49,430
So, this is for really big sites.

19
00:00:49,430 --> 00:00:53,120
This is not for you know, a one pager or

20
00:00:53,120 --> 00:00:55,530
something like that where
you just have a few links.

21
00:00:55,530 --> 00:00:57,140
>> Mega sites, maybe.

22
00:00:57,140 --> 00:00:57,840
>> That's right.

23
00:00:57,840 --> 00:01:00,440
So, let's take a look at the demo.

24
00:01:00,440 --> 00:01:04,940
And, up here on the left,
we have this drop down, here.

25
00:01:04,940 --> 00:01:06,600
So, I'll click it.

26
00:01:06,600 --> 00:01:11,120
And, you'll notice that clicking on
it is what actually activates it.

27
00:01:11,120 --> 00:01:15,520
You don't hover over it and activate it,
you have to actually click.

28
00:01:15,520 --> 00:01:18,230
And then when you hover
over these sub categories,

29
00:01:18,230 --> 00:01:22,890
you can have all sorts of really
nice layouts like these ones.

30
00:01:22,890 --> 00:01:26,990
And you can even have maybe
a few sub categories as well.

31
00:01:26,990 --> 00:01:32,040
It's pretty robust, and if you've ever
tried to build a drop down menu before

32
00:01:32,040 --> 00:01:34,460
you know just how difficult it can be.

33
00:01:34,460 --> 00:01:38,840
It seems kinda simple, but
there's actually a lot to it.

34
00:01:38,840 --> 00:01:44,240
So let's go back to the article here and
it says this is a responsive and

35
00:01:44,240 --> 00:01:48,800
easy to use customizable
mega dropdown component.

36
00:01:48,800 --> 00:01:50,690
I read some of those words, right?

37
00:01:50,690 --> 00:01:53,590
And they have a little animated
GIF of what it looks like.

38
00:01:53,590 --> 00:01:58,780
We saw what it looks like on desktop, but
they also have a really nice animation.

39
00:01:58,780 --> 00:02:02,570
It shows you what it looks like on mobile,
and

40
00:02:02,570 --> 00:02:07,960
the idea is that, like I said, you want
to click on it to actually activate it.

41
00:02:07,960 --> 00:02:12,750
If you do want to change this
particular dropdown to work on hover,

42
00:02:12,750 --> 00:02:13,820
you can do that.

43
00:02:13,820 --> 00:02:19,090
It's easy enough, but
this is mostly a user interface or

44
00:02:19,090 --> 00:02:23,750
user experience decision that they made,
where you want to actually

45
00:02:23,750 --> 00:02:28,480
click it to activate it because it could
be a little bit easier to use that way.

46
00:02:28,480 --> 00:02:32,240
And really clarifies
the users intent much better.

47
00:02:32,240 --> 00:02:36,390
I like it on mobile because, and
they mentioned this in the article.

48
00:02:36,390 --> 00:02:41,853
That it takes the full focus of the screen
and I think that's actually kind of a nice

49
00:02:41,853 --> 00:02:47,337
move on their part, because on mobile
screens, obviously there's less space.

50
00:02:47,337 --> 00:02:50,958
So just making the decision and
saying yep, if you tap this,

51
00:02:50,958 --> 00:02:55,502
it's just going to take up the whole
screen, really gives you kind of a lot of

52
00:02:55,502 --> 00:02:58,910
leeway in other types of
decisions that you might make and

53
00:02:58,910 --> 00:03:02,320
allows you to have those
robust layouts for the menu.

54
00:03:02,320 --> 00:03:04,440
>> It was a mega-good decision.

55
00:03:04,440 --> 00:03:05,330
>> It was.

56
00:03:05,330 --> 00:03:07,270
So all the code is there.

57
00:03:07,270 --> 00:03:11,510
They also have some slight variations for
how it might look on tablet.

58
00:03:11,510 --> 00:03:14,621
Definitely be sure to check this one out,
because like I said,

59
00:03:14,621 --> 00:03:17,628
making these types of dropdowns
is notoriously difficult.

60
00:03:17,628 --> 00:03:20,972
So if you could find a really good one
like this that just works you should

61
00:03:20,972 --> 00:03:22,211
definitely go with that.

62
00:03:22,211 --> 00:03:23,400
>> Yeah, it's mega cool.

63
00:03:23,400 --> 00:03:24,150
>> Mega cool.

64
00:03:24,150 --> 00:03:28,379
>> Next up,
we have a project called ReadRemaining.js.

65
00:03:28,379 --> 00:03:33,261
This is a very very simple jQuery
plugin that tells you how much longer

66
00:03:33,261 --> 00:03:35,970
you have to go when reading a page.

67
00:03:35,970 --> 00:03:37,740
>> Oh, nice.
I have like a one second read.

68
00:03:37,740 --> 00:03:40,690
Hey, hey, that was pretty quick!

69
00:03:40,690 --> 00:03:42,110
>> Yeah, that was the one second.

70
00:03:42,110 --> 00:03:43,630
>> Wow.
Maybe, okay, so

71
00:03:43,630 --> 00:03:45,050
you might not need this-
>> No.

72
00:03:45,050 --> 00:03:45,620
>> This plugin.

73
00:03:45,620 --> 00:03:47,990
But let's go ahead and
take a look at the demo.

74
00:03:47,990 --> 00:03:49,750
If you look at the top left,

75
00:03:49,750 --> 00:03:54,560
it shows you in this little div right
here how much longer you have to go.

76
00:03:54,560 --> 00:03:58,380
Now, the centered one is what
I prefer as you're scrolling.

77
00:03:58,380 --> 00:04:02,040
Scroll down a little bit,
plugin doesn't work, just kinda wait,

78
00:04:02,040 --> 00:04:02,850
see what's going on.

79
00:04:02,850 --> 00:04:03,700
Hey, nothing's going on.

80
00:04:03,700 --> 00:04:05,660
Let's scroll down a little bit more,
see if anything happens.

81
00:04:05,660 --> 00:04:06,560
There it is.

82
00:04:06,560 --> 00:04:07,640
It says we have two minutes and

83
00:04:07,640 --> 00:04:12,320
six seconds left to read
the rest of this block of text.

84
00:04:12,320 --> 00:04:14,530
>> So
what happens if I don't make it in time?

85
00:04:14,530 --> 00:04:16,740
Is this a self-destruct type message?

86
00:04:16,740 --> 00:04:17,756
>> Yeah, you're gonna be quizzed.

87
00:04:17,756 --> 00:04:18,512
Okay.

88
00:04:18,512 --> 00:04:22,670
>> Sorry, your computer actually destructs

89
00:04:22,670 --> 00:04:25,770
if you don't make it to the end
of the article in time.

90
00:04:25,770 --> 00:04:29,450
It's an option, you can disable that,
but why would you?

91
00:04:29,450 --> 00:04:31,440
>> Yeah it's good motivation for reading.

92
00:04:31,440 --> 00:04:32,710
>> Why would you?

93
00:04:32,710 --> 00:04:37,060
So anyway, really easy to use, just
drop the script in CSS in your page, and

94
00:04:37,060 --> 00:04:39,640
then call read remaining.

95
00:04:39,640 --> 00:04:42,708
Now if you want to customize it, you can.

96
00:04:42,708 --> 00:04:48,780
It let's you customize how
longs the gauge delay is,

97
00:04:48,780 --> 00:04:52,910
so as you're scrolling down, if you want
it to show it immediately, just set that

98
00:04:52,910 --> 00:04:58,308
down to a very low number, show it on
start and the different time formats.

99
00:04:58,308 --> 00:05:02,160
Anyway, quick plug-n, but if this is
something that you would like to have

100
00:05:02,160 --> 00:05:04,450
on your page, go ahead and check it out.

101
00:05:04,450 --> 00:05:05,200
>> Very nice stuff.

102
00:05:05,200 --> 00:05:10,956
Well, next up is a motion
blur effect with SVGs.

103
00:05:10,956 --> 00:05:13,320
So, let's go ahead and look at this demo.

104
00:05:15,580 --> 00:05:17,490
And, so far, so good.

105
00:05:17,490 --> 00:05:19,810
There's a little carousel here.

106
00:05:19,810 --> 00:05:23,670
We've seen that before, but watch what
happens when we swipe through here.

107
00:05:23,670 --> 00:05:24,890
Woah!
>> Why don't you

108
00:05:24,890 --> 00:05:25,870
swipe a little slower, Nick?

109
00:05:25,870 --> 00:05:27,590
You're going to get a speeding ticket.

110
00:05:27,590 --> 00:05:31,470
>> So if we actually just kind
of wobble this back and forth,

111
00:05:31,470 --> 00:05:35,680
you can see how there is
a motion blur effect.

112
00:05:35,680 --> 00:05:39,370
It's a little bit hard to see maybe on
video because you can only see it when

113
00:05:39,370 --> 00:05:40,490
it's actually moving.

114
00:05:40,490 --> 00:05:41,530
>> And because it's blurry.

115
00:05:41,530 --> 00:05:43,550
>> That's right, and it is blurry.

116
00:05:43,550 --> 00:05:46,860
But I promise you it is there, so
you may want to check this out.

117
00:05:46,860 --> 00:05:48,830
On your own in a web browser, but

118
00:05:48,830 --> 00:05:53,340
it's applying this motion blur
effect to the left and right.

119
00:05:53,340 --> 00:05:55,580
It's a little bit easier
to see in this picture.

120
00:05:55,580 --> 00:06:00,000
It's actually blurring this image
as you move it back and forth.

121
00:06:00,000 --> 00:06:01,610
Now, why would you want to do that?

122
00:06:01,610 --> 00:06:05,520
Well, sometimes say in motion graphics,

123
00:06:05,520 --> 00:06:10,820
you can add a greater sense of motion when
you add a directional blur like this.

124
00:06:10,820 --> 00:06:15,228
And on a web page, where maybe
the frames per second aren't as high,

125
00:06:15,228 --> 00:06:20,092
you can actually get away with lower
frames per second in some instances with

126
00:06:20,092 --> 00:06:24,956
a motion blur like this, because it
sort of interpolates the frames that you

127
00:06:24,956 --> 00:06:29,379
don't have and shows you what it
would actually end up looking like.

128
00:06:29,379 --> 00:06:31,010
So you get that nice blur effect.

129
00:06:31,010 --> 00:06:33,340
Now, something to point out
before I get into this.

130
00:06:33,340 --> 00:06:36,990
Is that attention,
this is highly experimental and

131
00:06:36,990 --> 00:06:39,840
it only works in some modern browsers.

132
00:06:39,840 --> 00:06:42,440
And Chrome seems to have
the best performance.

133
00:06:42,440 --> 00:06:43,970
So, if you are looking at this,

134
00:06:43,970 --> 00:06:48,730
be sure to check it out in Chrome,
that seems to work the best.

135
00:06:48,730 --> 00:06:53,460
So, this is a motion blur effect with SVG,
and

136
00:06:53,460 --> 00:06:58,350
if you know anything about
the CSS blur filter,

137
00:06:58,350 --> 00:07:02,330
you know that it doesn't
have a directional blur.

138
00:07:02,330 --> 00:07:07,570
So we have to actually create this
ourselves using an SVG filter, now

139
00:07:07,570 --> 00:07:11,980
there's another article linked here that
covers that in more detail so if you don't

140
00:07:11,980 --> 00:07:16,890
know about SVG filters, be sure to check
that out because they are pretty cool.

141
00:07:16,890 --> 00:07:24,628
So basically they just apply this
GaussianBlur filter as a primitive.

142
00:07:24,628 --> 00:07:28,759
And then they manipulate it
a little bit with JavaScript and

143
00:07:28,759 --> 00:07:34,030
they're actually filtering every
single frame to get this effect.

144
00:07:34,030 --> 00:07:36,600
So, it's a little bit more
complicated than that.

145
00:07:36,600 --> 00:07:39,820
There's actually quite a bit more to this.

146
00:07:39,820 --> 00:07:41,930
But definitely be sure to
check this article out,

147
00:07:41,930 --> 00:07:46,980
because it is a pretty fascinating
technique that I have not seen before.

148
00:07:46,980 --> 00:07:48,110
It's pretty original.

149
00:07:48,110 --> 00:07:49,000
>> Yeah, it's really cool.

150
00:07:49,000 --> 00:07:51,150
It looks great, too.

151
00:07:51,150 --> 00:07:53,890
Next up,
we have a project called ScrollWatch.

152
00:07:53,890 --> 00:07:59,250
This is a piece of JavaScript that
will allow you to attach events.

153
00:07:59,250 --> 00:08:02,410
Based on scroll position in a browser.

154
00:08:02,410 --> 00:08:03,410
So, what does that mean?

155
00:08:03,410 --> 00:08:05,750
Let's go ahead and
just see how it works, first.

156
00:08:05,750 --> 00:08:08,540
Scroll down to the bottom of the page,
here.

157
00:08:08,540 --> 00:08:13,180
Now, if we look at this little box,
right here,

158
00:08:13,180 --> 00:08:16,840
we can scroll the page to
see ScrollWatch in action.

159
00:08:16,840 --> 00:08:22,400
And as we are scrolling, you'll see
the text gets faded in a little bit.

160
00:08:22,400 --> 00:08:24,460
Now you can do more
than just fade in text.

161
00:08:24,460 --> 00:08:27,490
It works with pretty much any container.

162
00:08:27,490 --> 00:08:29,780
Here's one for infinite scrolling, and

163
00:08:29,780 --> 00:08:34,850
as we scroll down the page it says,
I am lazy and late to the party.

164
00:08:34,850 --> 00:08:40,620
Now this element is being added each time
we get near to the bottom of the page.

165
00:08:40,620 --> 00:08:44,640
You can do more then just add elements and
there's actually quite a bit you can do.

166
00:08:44,640 --> 00:08:49,961
You can watch any element and
you can even multiple instances of this.

167
00:08:49,961 --> 00:08:53,496
Now what's really neat
about it is it gives you

168
00:08:53,496 --> 00:08:57,586
an event to attach once
the element comes into frame.

169
00:08:57,586 --> 00:09:02,202
And then you can also give it options
to throttle, wait a certain number of

170
00:09:02,202 --> 00:09:07,810
milliseconds before doing something, and
then here's this event onElementInView.

171
00:09:07,810 --> 00:09:11,350
Attach any function to this and
you are pretty much good to go.

172
00:09:11,350 --> 00:09:13,520
Customize exactly what happens.

173
00:09:13,520 --> 00:09:16,870
So there are a lot of things that
you could use this for, use it for

174
00:09:16,870 --> 00:09:20,070
infinite scrolling, effects,
just tons of different things.

175
00:09:20,070 --> 00:09:22,230
If you're in need of a plugin to use for
something like that,

176
00:09:22,230 --> 00:09:24,250
definitely check out scroll watch.

177
00:09:24,250 --> 00:09:29,740
>> Very nice stuff, well next up is how
to vertically center a clipped image

178
00:09:29,740 --> 00:09:34,520
in CSS, so let's just,
right off the bat, what does that mean?

179
00:09:35,770 --> 00:09:39,640
Sometimes, when you serve
up an image in CSS,

180
00:09:39,640 --> 00:09:44,550
it could be cut off at the top or
bottom, so

181
00:09:44,550 --> 00:09:48,720
maybe you have a certain height
that an image needs to fit into.

182
00:09:48,720 --> 00:09:50,840
But you don't wanna resize the issue and

183
00:09:50,840 --> 00:09:55,780
sort of crush it into this
horizontal tiny little box.

184
00:09:55,780 --> 00:09:59,590
So you need to either cut off the top or
cut off the bottom, and

185
00:09:59,590 --> 00:10:04,940
it can be difficult to actually just
get it right there in the middle.

186
00:10:04,940 --> 00:10:11,380
So what this article describes
is how to calculate an offset,

187
00:10:11,380 --> 00:10:19,130
and then use the top and transform
properties to move it into position.

188
00:10:19,130 --> 00:10:25,810
So, for the actual image, once it's
already been cropped with a wrapper,

189
00:10:25,810 --> 00:10:31,595
you'll set the top property to the value
of 50% and that will move the image down.

190
00:10:31,595 --> 00:10:37,810
50% of the wrapper height, so
that will get your vertical centering.

191
00:10:37,810 --> 00:10:43,530
Then you use transform with the value

192
00:10:43,530 --> 00:10:49,230
translateY and that will actually
move it toward the middle.

193
00:10:49,230 --> 00:10:54,090
So you have that at -50% and that will
move it inside that wrapperdiv and

194
00:10:55,560 --> 00:11:00,230
put it in the middle, and then you'll
get something that looks like this.

195
00:11:00,230 --> 00:11:02,170
And no matter what image you use,

196
00:11:02,170 --> 00:11:05,023
it'll actually just show
you this picture of a wolf.

197
00:11:05,023 --> 00:11:06,032
>> That's very useful.

198
00:11:06,032 --> 00:11:10,550
>> Which I kind of like because I
really always need that on my websites.

199
00:11:10,550 --> 00:11:13,950
>> I had to pause when you said
that to make sure that was correct.

200
00:11:16,250 --> 00:11:17,800
>> I got nothing.

201
00:11:17,800 --> 00:11:19,450
This actually will work.

202
00:11:19,450 --> 00:11:21,050
>> I mean,
if I were really using that in production,

203
00:11:21,050 --> 00:11:22,890
it would give me claws for alarm.

204
00:11:24,470 --> 00:11:27,810
>> This will actually work
all the way back to IE 9.

205
00:11:27,810 --> 00:11:30,200
>> Look at that pack of browsers.

206
00:11:30,200 --> 00:11:35,050
>> It is a pack of browsers and
it will work on Firefox way far back,

207
00:11:35,050 --> 00:11:35,810
Chrome way far back.

208
00:11:35,810 --> 00:11:39,200
So, it actually has pretty
strong browser support.

209
00:11:39,200 --> 00:11:44,750
It's definitely an okay technique
to use and it's pretty good.

210
00:11:44,750 --> 00:11:47,720
And that way you can go ahead and
click on something like that and

211
00:11:47,720 --> 00:11:51,060
actually see the full image there,
if you want to.

212
00:11:51,060 --> 00:11:52,570
And go back.

213
00:11:52,570 --> 00:11:55,240
So, pretty nice stuff.

214
00:11:55,240 --> 00:11:57,780
I really like this technique a lot.

215
00:11:57,780 --> 00:11:59,730
>> I thought those jokes would
have had you howling a little bit

216
00:11:59,730 --> 00:12:00,930
more with laughter.

217
00:12:00,930 --> 00:12:02,770
>> That's all we have time for this week.

218
00:12:02,770 --> 00:12:04,270
I am @nickrp on Twitter.

219
00:12:04,270 --> 00:12:05,240
>> And I'm @jseifer.

220
00:12:05,240 --> 00:12:06,930
For more information on
anything we talked about,

221
00:12:06,930 --> 00:12:09,740
make sure to check out the show
notes right below this video.

222
00:12:09,740 --> 00:12:13,171
Thank you everybody for watching,
and we'll see you next week.

223
00:12:13,171 --> 00:12:13,671
[MUSIC]