Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:13Length:2.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 The “Why” and “How” of PixiJS

The best way to understand why you should use PixiJS is to look at some examples of it in production. In this lesson, we’ll check out some highly impressive implementations of PixiJS, and then we'll briefly cover how it is actually used in a web design setting.

Related Links

1.2 The “Why” and “How” of PixiJS

Hey, I'm Kezz Bracey of Tuts+, welcome to Up and Running With PixiJS. I want to get started by giving you a little bit of context on how you would actually use PixieJS in a practical sense. Because when you hear that, it's a library for working with WebGL and working with graphics rendering, doesn't instantly mean something you might be thinking. Well a web developer, not a game developer. So how does this help me? And I think the best way to answer that question is by looking at some practical examples of PixiJS in live production websites. And web it and start then we've picked suggests his own website. So there's gonna be links to all these examples sites in the notes below. This one is pixijs.com and at the top of the site, you can see that we've got this hero unit with these really cool background effects in there. And just to make one thing clear, PixiJS is not really about anything functional. It's completely about making things look good, it's all about visuals. So we've got this cool looking background in this hero unit. And even cooler, when you bring your mouse and move it around in this hero unit. This effect kind of blobs around and follows your mouse pointer. So as I said, there's nothing functional about that, it's just cool. And I suppose it is actually functionally helpful, if you consider that one of the main things that you struggle to do in a web design is to get and keep the visitors attention. And if something looks great and it's interesting, then that definitely helps to achieve that goal. The next example that we've got to look at is goodboydigital.com which is the website of the people who actually make PixiJS. So you see you've got this really interesting little loading animation, and then we've got a couple of things going on here. We have this grid overlay that's running on top of a video, a sequence of videos or perhaps one video, I'm not sure, running behind that grid. And we interact with the grid, you can see that it moves around on a 3 dimensional plane. And then if we scroll further down to the bottom of this site. PixiJS is used in this portion as well again, it's creating this grid and it's kind of flickering effect that you see. And like in the main PixiJS site the effect will follow your mouse. Another really cool example of what you can do with PixiJS is the website for the Sony Xperia XZ2, XZ2 depending where you from. So you've got these visuals going on in the background. And PixiJS is also used to create the text that you see on the screen. And when you move the mouse over you get this really cool chromatic aberration and distortion effect. And when you scroll down You can see that ad also generates that really interesting transition from one part of the site into the next. And again you've still got the chronic aberration and the distortion effect where you put your mouse. So that's just visually really really interesting. Next we've got the website of dottodot.es. And part of what goes on in this site is not done with PixiJS it's done with Green sock. And you can actually do a lot of real interesting things if you combine these two libraries, but that's for another day. All of those little yellow circles and lines that you see moving around in the background, that's all done with PixiJS. And that hover effect when you hover over that text is also done with PixiJS. And when I move my mouse around, you can see that we've got this really cool little yellow pop ups, with information and images. That is also done with PixiJS, which takes you into another section of the site. Next up we've got uix.me, if you notice that there's kind of a colored misty effect moving across the screen there. That's done with a shader inside PixiJS. This site is daijima.jp. And they've got these really interesting page transitions to take you from one portion of the site into another. Next up we've got this Lexus web site, which is at see.lexus.com. And to get straight to this part of their site, add /#category. Now, this is all interactive, all these hover effects on this image is interactive. This background stuff where you've got these little geometric lines animating their way across the area, that's all done with PixiJS. And when I click on one of these, We get more interesting transitions to move through the content of the site. This is a really cool experiences, what they've called it at rainforestfoods.com. And you could see that we've got this really nice parallax effect when we move our mouse around the stage and we have the animated birds moving across in the background there. And when I scroll, we move on to another section. It's also, using a parallax effect there when we move the mouse, so lots of really really impactful attention grabbing visuals. And then our last example, I am not going to attempt to pronounce because I'll do a terrible job of it. So we've got this really nice flickering fire type of animation, with the particle effect. And again, we have another parallax movement effect when we move the mouse around on the page. So if the project that you're working on is something where you need to keep things minimalist, then PixiJS is probably not gonna be very helpful for that particular type of project. But if you're looking for a way to add some visual flair, add some artistic expression, and creativity into a site. Add some elements that can help to grab attention and to keep attention, then PixiJS is definitely something that can help you. And what this all boils down to in practical terms, is you just simply generating canvas elements. So in this example that you're looking at here, there's a canvas element and all of these visual effects are contained inside it. And you can take that canvas element, you can put it in you hear a unit as a background for just that portion of the page, and then you can put text elements on top of it. You can do what they've done here on the PixiJS website and do a whole bunch of little canvases. Each one of these little rectangles on these devices are individual canvases position to line up the background graphic of this set of devices so you can use it that way. You can have a canvas element act not just as a hero unit but as the background for your entire page. Like in this Xperia example. You can do what they've done in dottodot.es, where each one of these words is an individual canvas element and their opposition horizontally on the page. So that's how it all works in a nutshell. You create canvas elements, you put your text, your images, your visual effects inside those canvas elements and then you position them into your website. So that should help you to see what the end goal is of learning the basics of PixiJS. So we're not gonna be able to jump straight into the level of development that you're seeing in some of these example sites. But what we're gonna do is start to beginning and give you all of the components that you would need to create this top effects. And we're gonna get started right at the beginning just by creating a really basic PixiJS application. Just looking at how you actually set up a page so that we'll load PixiJS. Create a canvas for you and then we are going to add in some basic text and we're gonna add in an image. So we're gonna do that in the next lesson. I'll see you there.

Back to the top