Episode 60: CSS Animations, CSS Sprites, Form Building

I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching the Treehouse show, 0:00 your weekly dose of Internets where we talk about all things web design, web development, and more. 0:03 In this episode we'll be talking about CSS animations, CSS sprites, form building, and more. 0:08 Let's check it out. 0:14 [treehouse™ show] 0:16 First up is parallax.js. Now just as the name implies it allows you to create parallax effects on a webpage. 0:21 Does it allow you to create single-ax effects? 0:30 No. >>Get it? >>Just—just— >>Pair a lax? >>Just a pair of lax or parallax affects. 0:33 So if we go ahead and scroll around with the mouse you can see that we can actually parallax up and down as well as left and right. 0:40 Whoa! >>Wow! >>What is going on? >>I don't know. >>This is amazing. >>This world's upside-down. 0:48 Best of all you can actually do this on a mobile device, 0:53 and it will talk to the gyroscope, and based on the way the you're tilting the device it will parallax in that direction. 0:56 Pretty amazing. If we go ahead and open this super awesome info panel 1:04 and head over to GitHub, we can scroll down and see that this is using special HTML5 attributes, and this is using the data attribute. 1:08 In this case they're calling it data-depth. You can put whatever you want there. 1:22 And the depth value defines how far back in space each of your different layers are. 1:26 So you just create your layers and then parallax.js sets up the scene and does the rest. 1:33 It's a little bit more in-depth than that, but that's pretty much how it works. 1:40 You can use it with jQuery as well as Zepto. Pretty cool stuff. 1:43 That is really neat. >>So definitely be sure to check that one out. 1:48 Really, really cool library. >>Uh-hunh (affirmative). 1:51 Next up we have a library called animo.js. This is a JavaScript library that is dependent on jQuery 2 but it does CSS 3 animations. 1:53 Whoa! >>Yeah! No, it's really awesome; it gives you essentially chaining and callbacks so that when an animation has completed 2:02 you can just jump straight into the next one letting you make more complicated, longer CSS animations. 2:09 That's kind of one of the drawbacks; right now you have to do a whole bunch of weird, crazy JavaScript 2:15 in order to get things to go a certain way. 2:19 So they have some different examples that you can see on here. 2:21 Here is—we'll do this one—Bounce in left followed by Bounce in right. >>Whoa! >>Wow, look at that! >>Amazing. 2:25 Want to see that again? >>Whoa. >>Look at all that bouncing going on. It's crazy. >>I could watch that all day. >>Yeah. 2:32 So here's another one where you can put all these things together and make a little magic. 2:38 Click that there and then you can see all the different letters are animating at different times. 2:43 Now this is the code to do it. You can see there's really not a lot to do here. 2:48 As I said before, normally when you're doing animations you have to do a whole bunch of funky JavaScript to see when things complete, 2:53 but you can just pass a callback in and chain them that way. 2:59 So, really cool library. Like I said, it's called animo.js. You can find a link to it in the show notes at youtube.com/gotreehouse 3:03 or search for us on iTunes at the Treehouse Show. 3:10 Very cool stuff. Well next up is FormBuilder.js—once again, an aptly named piece of JavaScript. 3:13 Yeah, what does it do? >>This allows you to build forms, if you can believe that. >>Wow. 3:21 So basically if you've ever used something like Wufoo or Google web forms, it's very similar to that. 3:24 This is a piece of JavaScript that allows you to embed form builders onto your website so that users of your site can build their own forms. 3:32 So they have a couple of fields over here on the left side. 3:41 You can go ahead and drop in, say, an address field. 3:44 And when you drop things in, it will actually allow you to place them amongst the other form elements 3:47 and then you can go ahead and edit the fields and apply some of your own labels and attributes here. 3:53 You can, of course, remove things as well and go back and add more fields, and it's pretty intuitive. 3:59 It's all drag and drop and really, really easy to use. 4:06 And of course you could go ahead and apply your own styling to this as well and make it look like it's a very well-integrated part of your website. 4:10 It's very cool stuff, and it's actually pretty easy to use. 4:19 You just go ahead and drop in the JavaScript, and it just has a couple of dependencies. That's kind of the only tricky part about it. 4:22 But very cool stuff once you have it up and running. 4:30 Oh very nice library. >>Uh-hunh (affirmative). 4:33 Next up we have a library called complete.ly or completely. 4:35 This is a library that does auto completion, kind of like Google Suggest. 4:40 So here, we've got some examples. Click on "See it in action" right here. 4:45 We'll click on "A different travel booking", and it says "Type where you want to go". 4:51 "I need a" and then you can see there are different suggestions right here. 4:56 And this is just a quick library to do that.There are different clauses that you can use right here. 5:02 So we'll say "the cat is on the roof". 5:07 So anyway, that's really not that interesting to watch me type things into a computer, 5:16 but if you do need to use an auto completion or auto suggest library, I recommend checking out complete.ly. 5:21 It's small, it's self-contained, and it's very, very easy to use. 5:28 And it has the usual options and configurations that you would expect from plug-ins that we feature here on the show. 5:30 That is completely awesome. Well next up is— >>Nick, you complete me. >>Complete.me. Man I really hope that's not a bad website. 5:36 All right, don't go there. 5:45 Next up is Clipping Magic which is a really cool tool for basically extracting things out of photos and removing background images. 5:47 Of course you can do this with a tool like Photoshop, 5:57 but Clipping Magic uses a really cool algorithm to go ahead and remove all of that information. 5:59 So we can go ahead and click on 1 of these smiling faces down here 6:06 or we could go ahead and upload our own image, but I've already gone ahead and done that. 6:10 I'm going to click on this image here. 6:14 So once it's loaded up we can go ahead and use the additive or subtractive brushes here, 6:17 and we can set the brush size. 6:23 I'm going to use a rather broad brush. 6:26 And with the subtractive brush, I'm just going to go ahead and paint away the parts of the image that I don't want to be in the final result. 6:28 And then with the additive brush I'm just going to go ahead and kind of paint on the parts that I want to keep.Wow. >>And— 6:39 That's really good. >>If it looks like there's a couple areas that are having some problems, I can go ahead and go in and clean those up. 6:48 And this was just a really quick demo of this, but if you spend a little bit more time actually using finer brushes and stuff, 6:57 you can get a pretty goo transparent png result and then you can go ahead and download it. 7:08 This is a beta product right now, so you don't actually have to pay for it just yet. 7:12 It's looking like that they will eventually go to a paid model, but it's free right now so go ahead and check it out. 7:18 It's actually faster to do this that to do it in Photoshop in my opinion. >>Yeah. That's really, really neat. 7:25 Yup. >>Very impressive technology. >>Uh-hunh (affirmative). 7:30 Next up we have a project called XDomain. 7:33 This is a little piece of JavaScript that you can use to do cross-origin requests from JavaScript. >>Wow. 7:35 Yeah, it's really, really easy. There's just 1 HTML file that you have to put on the foreign server. 7:42 That is on a different domain than the web server you want from. 7:48 It's called proxy.html. You put that on the domain that you want to communicate with. 7:51 And then the library takes care of everything else for you. 7:57 You can see it's really, really easy to use. 8:01 You just drop in the JavaScript on both the master domain and then the other domain that you want to contact. 8:03 And then it is extremely easy, you just do—here's an example with a jQuery Get request. 8:11 And then right there you'll have access to the data. 8:17 Now this is so much easier to do than previous versions of what you would have to do. 8:20 Cross-origin site requests are very, very tricky to do, and this makes it so much easier. 8:25 So check it out. It's called XDomain. Not really much to say about it. 8:31 It's easy to use, and it takes away a lot of pain points when doing those cross-site requests. 8:34 Wow, yeah, that's really cool. I actually had not heard about this until Jason just talked about it. 8:38 But this would have been useful to me actually last week. I was doing a little bit of WebGL stuff. 8:44 And to load in models you need to use JSON data, and you actually have to start up a web server on your computer 8:49 even though it's all just HTML, CSS, and JavaScript because it's pulling in that information from what appears to be another domain. 8:57 So, very cool stuff. >>Yeah. >>All right, well next up— >>Sorry I didn't tell you about that last week. >>That's okay Jason. 9:05 This is why I always say we should talk more. >>I forgive you. And me as well? >>I'll think about it. >>We'll figure it out. 9:11 All right, next up, speaking of WebGL, is this really cool example that shows or demo that shows off WebGL filters. 9:20 Now when people think of WebGL they typically think of 3D graphics, but you can actually use WebGL for 2D graphics as well. 9:29 And this is very powerful because you can go ahead and apply all these complicated effects in real time. 9:37 Now this is something that you would typically expect to see in something like Photoshop, 9:45 but here it is right in the browser on a canvas element. 9:50 And it's actually able to do fairly complex things like these swirls and things that would take Photoshop a little bit of time to process 9:54 in its software renderer, but it's actually doing these very quickly here because all of this is being processed on the GPU. 10:02 Of course WebGL gives you access to the GPU through the browser, so it's able to process all these effects in real time. 10:09 I do want to give credit where credit is due; this was made by Evan Wallace using the GL effects.js library 10:17 which is a totally separate thing from this but also very cool and worth checking out. 10:25 It's very cool stuff. And actually you can go ahead and use this and then download the image when you're all done. 10:31 So once again another thing on the web that is a replacement for Photoshop in some regards. 10:37 You're just trying to put Adobe out of business on this episode of the show. >>That's right. 10:43 So next up we have a project called Spritemapper. 10:47 Now we've talked about CSS spriting before on the show. 10:51 That's where you take a bunch of small images and make them 1 larger image then manipulate the background position using CSS. 10:54 Whoa. >>Yeah, whoa. This saves on requests and makes it an overall faster experience for users 11:01 because they only have to download 1 image as opposed to a whole bunch of different ones. 11:06 Well Spritemapper is a CSS spritemap generator. 11:10 This is just a command line tool that you can use. It's written in Python, and you can give it the path to your CSS file, and it does magic for you. 11:13 It will take all of your images and create the CSS sprite for you. 11:25 You can give it the base URL, the different sprite directories, and what the output image you want to be is, 11:30 and then it will generate all of the different CSS for you as well as the image. 11:37 So, a very, very useful tool. Not much to say about it. Just if you want to make CSS sprites, this is the way to do it. 11:44 Very cool stuff. Well I'm @nickrp on Twitter. >>And I'm @jseifer. 11:51 If you want more information on anything we talked about, check us out on YouTube for the show notes and more at 11:55 youtube.com/gotreehouse or search for us on iTunes at The Treehouse Show. 12:00 And of course if you'd like to see more videos like this one about web design, web development, mobile, business, and so much more 12:05 be sure to check us out at teamtreehouse.com. 12:12 Thanks so much for watching, and we'll see you next week. 12:15 [treehouse™ Show] 12:18

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

Sign up