Episode 92: Morphing Buttons, Rangeslider, Declarative Animations

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 [MUSIC]. 0:02 >> And you're watching the Treehouse show, you're weekly dose of Internets, 0:02 where we talk about all things web design, wed development, and more. 0:05 >> In this episode, we'll be talking about 0:08 morphing buttons, range sliders, declarative animation and more. 0:09 >> Let's check it out. 0:14 [MUSIC]. 0:15 >> First up we have a library called pull and zoom. 0:20 The pull and zoom library replicates the functionality that 0:24 you might have seen in the twitter application on IOS. 0:28 >> So what happens is, as you're scrolling down the page. 0:32 A background image will zoom in. 0:35 This is what it looks like on Android. 0:38 So if you scroll down, it will actually get 0:40 bigger and appear to zoom in on the image. 0:44 >> Wow. 0:47 >> Now this also works on IOS. 0:48 This is a very, very simple plug-in, you just initialize pulling zoom 0:51 after adding the load add event listener to your sight and you 0:55 give it the main page which is going to be the main 0:59 element and the background in which and then call this Ping method. 1:02 After that, it is completely done. 1:07 So it's really a very, very small plugin, there's actually not a lot of code here. 1:10 If you look at pull and zoom.js, it 1:14 really just initialize's the options, and then adds a 1:16 [UNKNOWN] for touch moves, scroll, touch start, and end, 1:20 and then it uses, red kick transforms and transitions. 1:24 To perform that background pull and zoom. 1:28 So, that's it, pretty simple plug in, but pretty nice, you know pretty easy to use. 1:31 Go ahead and integrate that on your pages if you want to. 1:36 We're not gonna force you. 1:38 >> You don't have to do anything we say. 1:39 >> Yeah, it's, I, I wouldn't listen to anything we say. 1:41 >> No. 1:44 Well, next up is a really cool demo on the code drops blog called morphing buttons. 1:45 See, morphing buttons Concept, and they have a bunch of different types here. 1:50 Here are the Login, and Signup buttons. 1:55 Let's click these, and see what they do. 1:58 Woah! 1:59 What just happened? 2:00 A modal window. 2:03 >> Wow. 2:05 >> And it was transformed from this button. 2:05 They have terms of service here. 2:09 So you can click that, and it brings it up. 2:10 That's, definitely here and there. 2:13 >> [LAUGH] 2:15 >> You can subscribe, so you can subscribe to our newsletter. 2:15 And if folds out this form, and that's pretty amazing. 2:18 I really like this share one. 2:21 When you click share this, watch this, whoa. 2:23 >> What? 2:25 >> What just happened? 2:26 >> The future of UI is now. 2:28 >> And then they have this really amazing video player. 2:30 You just click watch the trailer and it brings up movie trailer. 2:33 So this is pretty amazing, if we head over to the code drops 2:37 article we can scroll down the page and you can either view this 2:43 demo or you can download the source and alternatively you can. 2:48 Find this project on GitHub, so all the code to do this is right here, 2:54 and you can jump into the CSS and see exactly how all this is being done. 3:00 We're not gonna get into the code, but I 3:05 did want to show you this really cool design concept. 3:07 I think it's a pretty smart way to show small bits 3:10 of content, like terms and conditions, or like a contact form. 3:14 Or, you know, the share buttons, like that. 3:19 >> Also adds just a little bit of context to what you're doing, you know. 3:21 >> It does. 3:25 >> In case you forget what button you just clicked. 3:25 >> Which happens to me all the time. 3:27 >> Yeah, I know. 3:28 I, I can't be trusted to surf the web and not click on things. 3:29 >> Mm-mm. 3:32 Alright, next up we have a project called rangeslider.js. 3:32 This is a really really simple jQuery and java 3:35 script poly fill for the HTML 5 range slider element. 3:39 So here is an example of the range slider right here. 3:43 And you can see as I. 3:47 Drag the cursor, it will update the value. 3:48 What's really nice about this is it's touch-screen friendly, and it recalculates 3:51 on resize so you can use it with your responsive designs. 3:57 And it's it's very very easy to use. 4:02 It's compatible with standard HTML input elements. 4:06 Supports IE 8 and up. 4:08 And I mean, look at that, all you do, you 4:10 grab an element, and call the range slider method on it. 4:12 If you want to delete it, call destroy. 4:15 Now it does have a few different options. 4:18 You can either use it as a poly fill. 4:21 Call the different classes that you want to 4:25 use, range slider, range slider fill, and handle. 4:27 And then you get call backs for initialize. 4:29 Slide starting, and sliding ending. 4:32 So, cool they have a few different examples right here. 4:35 Here's an example of destroying it and falling 4:38 back to the native element, or initializing it. 4:40 And there you go. 4:43 Again, very very simple. 4:44 You can find the link to this in our show notes which you can 4:46 get to at YouTube.com/GoTreehouse, or search for 4:48 us on iTunes, we are the Treehouse Show. 4:50 >> Very nice stuff. 4:54 Well next up is WTF, forms? 4:54 I'm saying it like that because there's a question mark there. 4:58 >> Hm. 5:00 >> This is a re-styling of several common form controls. 5:01 It's done by Mark Otto, you may know him from Twitter formally. 5:06 He is now at GetHub and he works on the bootstrap project, and these form controls 5:10 are designed for Chrome, Safari, Firefox, and Internet Explorer 9 and up. 5:16 So, let's take a look at them. 5:21 Here are some check boxes. 5:22 So we have these custom check box styles. 5:25 There's some nice radio buttons here. 5:28 >> I like that. 5:30 >> And you can also re-style what icons you're 5:31 using for each one of these so that's pretty cool. 5:35 There's also a Select menu here, so pretty standard stuff there. 5:39 And there's a File browser, which is actually notoriously difficult to restyle. 5:44 I've tried to do that in years past, and it was difficult. 5:50 Maybe it's easier now, and especially easier with WTF forms. 5:53 There's a good FAQ here, and one thing in particular I'd like to 5:58 highlight is that it doesn't style every form control just yet, and 6:03 there's no for attributes, but that's perfectly fine because if you look 6:08 at the markup here, all of the form elements are wrapped in label elements. 6:14 So, if you click on the form elements, 6:20 they'll, they'll be selected because they're wrapped labels. 6:23 so, right now, it doesn't require Java script so that's pretty nice. 6:27 It just requires CSS so that's great. 6:30 And will this be added to boot strap? 6:33 Possibly, but not until version 4.0 at the earliest. 6:35 So you. 6:40 Heard it here folks. 6:40 This is the beginning of boot strap four. 6:42 >> The beginning of the future. 6:44 >> That's right. 6:46 << The future will be later but right now we can start on it. 6:46 >> And it's only maybe so. 6:49 Okay? 6:53 Perfect. 6:54 >> Great. 6:55 >> Next up we have a project called Quill. 6:55 Quill is a very nice rich text editor built for the modern web. 6:58 So, you can have a text editor right here, and then you can do some typing. 7:03 Look at me, I'm typing. 7:07 And you can make things bold, italic, underline, and 7:09 add images and links, and it is a what-you-see-is-what-you-get editor. 7:13 Now, what's really nice about this though, is that 7:18 you have access to events inside of the JavaScript object. 7:21 So you can get access to the text changing. 7:26 And, then, you can even see where it came from, and you get 7:30 access to the delta which is gonna be what changed, inside the text field. 7:34 And you can also get access to 7:38 what was selected, inside of that particular editor. 7:40 That will allow you to do, different things, if you want to. 7:44 So pretty cool, you know, you can add toolbar 7:47 buttons and customize the toolbar if you want to. 7:50 And, as we're looking at this, the markup is relatively 7:53 minimal and, actually, kind of semantic at the same time. 7:55 So, it also supports different themes. 7:59 There aren't too many out there right now, but they're 8:02 saying that's because the interface has not been finalized just yet. 8:05 Anyway, this is a really nice project, and if you do 8:09 need to add a rich text editor to your site, definitely. 8:12 Give it a look, see what you think. 8:14 >> Very cool stuff! 8:16 Well next up is rendering realistic terrain in 130 lines. 8:17 This is pretty impressive. 8:23 Actually I'd like to start out with the demo. 8:26 So explore otherworldly terrain. 8:29 We can click on that, and it's going to render. 8:32 This kind of interesting looking terrain. 8:35 And if I refresh the page a couple different times, it will, 8:37 generate different terrain, and there's even 8:41 some water there, that's pretty amazing. 8:44 And this is all being done, like I said, in 130 lines of JavaScript. 8:45 Which is fairly compact. 8:49 So, how is this being done? 8:51 Well, first, a height map is being generated and if you are 8:54 not familiar with 3D graphics, a height map is a two-dimensional array. 8:58 So, it's sort of a data structure that you are looking at and then, 9:02 you take that data and you can extrude the terrain from the two-dimensional maps. 9:07 So, you basically map how, how tall each part of terrain should be. 9:12 And traditionally in 3D graphics, a dark portion will 9:19 be low, and the light portion will be higher. 9:22 So they generate this pipe map, and then. 9:25 They can have a couple of different ways of rendering it. 9:29 So you could render it as just a flat pipe map. 9:34 You could do it in an isometric perspective. 9:37 Or you could do it in perspective and there's all that there. 9:40 Now, you also have to light it, so they show how they do lighting and shadowing. 9:47 And then, like I said, they do the perspective projection right there. 9:52 Now, obviously, this is pretty complicated code, but if you're interested in 9:56 generating procedural terrains or you know, 10:02 doing some advanced algorithm design in JavaScript. 10:05 This is a really cool example of a really great 10:08 code that does one thing and does it really, really well. 10:12 I'm not sure when specifically you might need to use something like this on 10:16 a website, but it's just good code to kinda help you practice your skills. 10:20 >> Yeah, it's really cool. 10:25 Next up, we have a project called AniJS. 10:27 This is a declarative library for CSS animations. 10:30 So let's take a look at the example right here. 10:35 So, click square demo. 10:37 Ooh, get, get a load of this, watch this page. 10:39 It goes crazy. 10:41 Wow! 10:43 What's goin' on? 10:43 What is goin' on? 10:45 Look at this, I go to input my name, everything just falls out of place. 10:46 What? 10:49 Where's it going? 10:50 Why, why's it going there? 10:50 So, you might think that a ton of code is required to get 10:52 this to work, but no, this is all being handled in a data attribute. 10:56 So, you give it data. 11:00 Any js and we are saying, if this gets 11:02 focussed, do a wobble and then give it a target. 11:05 So, there are a few different animations that 11:10 you can do and the if is also supported. 11:12 If we look at the documentation, you can see here, here we go, Wiki Pages. 11:16 Sentence definitions. 11:22 So the different if scenarios are pretty easy to understand. 11:24 You know, if we click on something, if we focus 11:28 something or scroll to it or content has been loaded. 11:30 And then we do it on what part of the page, header, footer, whatever. 11:33 You know, so here we're saying, hey if we're clicking 11:39 on the header or on the footer, then swing everything. 11:42 Not really sure you would, why you would want to do a swing, but hey. 11:45 You might want to. 11:48 And then it tells you to, and that is the element that is going to be animated. 11:50 Now if it's not specified then the element that was 11:55 declared on is what event will be triggered on and animated. 11:58 So, this is a pretty interesting library. 12:03 I don't know if I'm completely sold on animating based on sentences. 12:06 But it is very, very simple to use if 12:11 you just want to get started with some simple animation. 12:14 So definitely make sure to check it out, evaluate it, 12:16 and see if it's right for you and your project. 12:19 You know it's nice that it does use CSS animations as well, so. 12:20 >> Very cool stuff. 12:25 Well next up is a wonderful blog post about 12:25 Bézier curves and how they relate to type design. 12:29 Now, if you are designing a font, which is 12:32 a fairly ambitious endeavor if you've never done it before. 12:36 It's actually pretty complicated. 12:39 Then this is a really great blog post about how 12:41 to design all of your curves for the type face. 12:44 Now, we're not really highlighting this because we want you all to be really 12:49 great type designers, this is actually an 12:53 excellent tutorial on how Bézier curves work. 12:56 Now there's two different types of Bézier curves, one is a quadratic curve and one 12:59 is a cubic curve and they work with different types of typefaces best. 13:04 However the article suggests using cubic Bézier curves. 13:11 Because, you have fewer points overall, and 13:15 there's a couple of other different reasons. 13:20 But the thing I want to highlight here is this 13:22 really amazing animated GIF, actually it's right here, excuse me, GIF. 13:24 >> Thank You. 13:29 >> [LAUGH] And, basically when a. 13:30 Cubic curve is being drawn. 13:34 You have a quadratic curve. 13:36 That was a quadratic curve, and here is a cubic curve, and 13:39 it's being drawn by rendering this quadratic curve between the two cubes. 13:44 And when a curve is being drawn like 13:49 this, it's actually a bunch of tiny little planes. 13:51 It's not actually a curve because it has to be rasterized to the screen. 13:54 >> When you say a bunch of tiny little 13:58 planes, you don't mean like, like passenger airplanes, right? 13:59 >> No, and I don't mean tiny, little airplanes either. 14:02 >> Okay. 14:04 >> No, no it's just a, it's just a normal plane in 14:05 the computer, and it's basically just rendering a bunch of tiny, little. 14:10 Straight lines, you could say, to create this curve. 14:14 Anyway, it's a great explanation about how Bézier Curves work and you 14:18 should definitely check out this post even if you're not a type designer. 14:22 >> I am not a type designer and I will check out that post Nick. 14:27 Because you recommended it. 14:30 >> Very nice. 14:32 >> Who are you on Twitter? 14:32 >> I'm @nickrp. 14:33 >> And I am @jseifer. 14:34 For more information on anything we talked about, 14:35 you can get to our show notes at YouTube.com/gotreehouse. 14:37 You can also search for us on iTunes. 14:40 We are The Treehouse Show. 14:42 Don't forget to rate us. 14:43 Also, if you would like to get one month free of Treehouse, 14:44 make sure to click the link that we have in the show notes. 14:48 >> And of course, if you'd like to see more videos like 14:51 this one about web design, web 14:52 development, mobile, business, and so much more. 14:54 Be sure to check us out at teamtreehouse.com 14:57 and use that link to get a free month. 15:00 Thank you so much for watching and we will see you next week. 15:03 [MUSIC] 15:09

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

Sign up