Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:33Length:4.8 hours

Next lesson playing in 5 seconds


Free Preview: Practical Web Animation


  • Overview
  • Transcript

The days of animation-heavy websites are fading, but there is still something to be said for a site with small amounts of subtle, eye-catching motion to help users interpret interfaces. In this course, I will show you practical ways to create animations for buttons, pricing tables, and other web elements, using concise CSS and jQuery to do so.

Learn CSS: The Complete Guide

We've built complete guides to help you learn CSS and animate css, whether you're just getting started with the basics or you want to explore more advanced techniques.

1. Introduction

1.1 Introduction

Hello and welcome to Practical Web Animation. My name is Craig Campbell. In this course, we're going to take a look at some every day uses of animation in web design. The techniques that we use to animate are not going to be complicated at all. We're going to use CSS and some very simple jQuery to create our animations. And we're going to talk about some creative ways that we can use animation without going overboard. So thank you so much for watching, and in the next lesson we'll get started.

1.2 CodePen

Hello, and welcome back to practical web animation. In this lesson, I wanna give you a brief overview on how we're gonna be using CodePen throughout this course. If you've never used CodePen before, CodePen is basically a website that allows you to very quickly throw together your own front-end web projects and if we create a new pen here for example, you can see that it gives you windows to entering your own HTML, CSS, and JavaScript. And then down here at the bottom, you will see the results of whatever code you've entered in. And one of the powerful things about CodePen is that you can use something that I've created as a starting point fork it which basically just means to make your own copy of it. And then use that as a starting point for your own project so you can fork it and then follow along with whatever changes we're covering in the course. So in this particular pen we might put a div here with a class of red-square for example. And then over here in our CSS we might create a rule for red-square. We might give it a width and height of maybe 100 pixels each and a background color of red. So once we do that you can see down here at the bottom we can see the results of our code. We can enter in some JavaScript in the window over here on the right. You can resize these windows. You can resize the bottom pane here as well. And there we go, so it's very easy to use and if I give you a starting pen to work with when you go ahead and save this one, then I will include the URL for that starting pen in the course notes, and then when you go to that starting pen you'll notice a button that says Fork. When we click on Fork, this basically just makes a new copy of our pen. And then once you have your new copy you can make whatever changes you want and it won't save over the pen that I created because again you've created your own copy. And so that's how we're gonna be using CodePen throughout this course, you can get to the website at codepen.io, I will include the URL for that intercourse notes. And again, for any starting pen that we use as we move forward throughout the course I will include those URLs as well. So thank you for watching, and in the next lesson will jump into CodePen and start creating our own practical web animations.