[Instructor] Hi.A few of my students wanted to knowhow the SuperHi logo actually worked.When you hover over the SuperHi logo at the moment,the "Hi" jumps up and down.There's two parts to this logo.First is "Super". Super doesn't change at all.This is basically just a static image.But the "Hi" is the thing that jumps up and down,so how does this actually work?Now this isn't using any kind of complex JavaScript.It's actually using a trick.Now if you see the image itself,it'll make a little bit more sense.Basically, you've got an image thatframe by frame we move really quickly betweento get each individual animation.Now we use this trick quite often on the SuperHi web site.You can see it further down the sitein these little animations called Wilson.Wilson is kind of our mascot.He animates between different states.Here's his confused face, and here's his happy face.Now, how does Wilson work?Wilson uses a strip in the oppositedirection across the page,and you can see all the differentstates that he goes between.This is his sad face, there's his thinking face,and there's his happy face further down the strip.We're using the same strip in lots of different scenarios,but I wanted to talk today about how this actually works.So I've set up a project already.I've got my index.html, which I currently have one div tag.My div, I've given it class of Wilson,because we're using Wilson's animation in there.I've got my style sheet in there already,which has a background image with Wilson,which is this big strip that we have.I set it to be background position 0 across and 0 down.

And then the background size, we're gonna make it retina.We don't know how long it could be, because wemight add more content in later and other animation.But we know 50 pixels high,that's what we want it to look like.I've set the width and height to both be 50 as well.So what we have at the moment isjust the first frame on the web site.How do you make this move though?The way we do this is we make an animation.Let's say we want to go to step #2.The way we'd do that is we move this strip across the page.So if I'm on my first, I wanna move it to the second one.I wanna move this across the page by 50 pixels.Because I'm moving it across the page,I want to change the background position, -50 pixels.So, "-50 pixels".

Now this isn't really obvious yet,because we're using this animation really really quickly.But if I wanted to move to step #3, I'd use -100.

And you can see now we've gone to step #3,we've gone from one, and two, then three, across the page.Now we wanna make the user do this automatically.We can't be there for the userto change these background positions.How do we do this?There's this fairly new thing in CSS called keyframes,and we wanna basically make our own.So at the top of our CSS, I'm gonna use "@keyframes".

Now I'm gonna give this keyframe a name.We wanna have this one called, maybe, "sad,"because he's gonna look sad in this one.So I'm gonna use "sad" and then curly brackets.I wanna start off at zero percent.Zero percent is gonna be thebackground position for the first frame.Background position 0 across and 0 down.

And I want to finish at 100%.And this background position, I've already worked out,is gonna be roughly 44 frames in.

I've worked this out already, it's 2200 pixels across,and still down the page by zero.

Now this keyframe doesn't do anything until we apply it.How do we want to do it?In this case, we want to do it on hover.What I need to do on hover is,in my div, with the class of wilson,when I hover this, I want to add this animation.

What is this animation called?We could have multiple keyframes.We've called this one keyframe "sad."We're gonna add this one in.The next step is how long this keyframe should last for.Because I wanna do this basically step-by-step,looking at like a 30-frame second, how long should this be?

I know already that it's 44 steps.30 frames a second gives us about 1.4 seconds,so I'm just gonna add in 1.4 seconds.

Now if we see this already, what we'll get is this effect.Technically, this is movingfrom zero to -2200 pixels across.

But we're doing it in this animated fashion,where we see every single picture.We don't wanna do every single picturefrom every single pixel across the page.Instead what we want to do is do it by steps.So in here, what I'm gonna do isadd "steps" in round brackets.

In my round brackets, I need to know the number of steps.This is gonna be 44, 'cause I've already worked it out.If we see this now, what we'll get isthis lookin' like an animation.And we're doin' it at 44 steps in 1.4 seconds.

The problem we have with this is,if we hover off very quickly,we get this kind of problem wherehe flicks straight back to normal.So how do we make this look more natural?There's a few ways to do this.We might not wanna do things on hover.Instead we could use JavaScript to handle this.So what I'm gonna do is, I've already addedmy jcrew.js, I downloaded it from jcrew.com.Downloaded it, and I've dragged it into my project.And I've added my own animate.js file as well,which I'm gonna write my own code in.But I need to add this to my web page.I need to add my script, with jquery in first of all,because I need jquery first. And my second script,which is the one that I'm gonna write my code in,called animate.js.

Now I'm not gonna do this on hover.I'm gonna add a class using JavaScript instead.So what I'm gonna do is find in jquerymy div with the class of wilson.And I wanna do this on mouseover,because when I move my mouse over I want to add something.So I'm gonna do things on.This is an event, on "mouseenter".

Now what do I want to do on mouseenter?I want to run a function.

Now just to make this easier to read,I'm gonna open up my curly brackets.I want to find this.This is the thing we're talking about, div class wilson.And I'm gonna add another class onto here.The class I'm gonna add is called animate,but I could call this whatever I like.So what we're gonna do is go backto our style.css first of all.And instead of it being on hover,I'm gonna let jquery and JavaScript handle this instead.To add another class onto here,I'm gonna do div with the class of wilson,and another dot if we have animate as well.

Jquery's handling this, so itgives a little sad face in here.But what we're gonna do is div class wilson,whenever the mouse enters at this class of animate.If I see this at the moment, what this will do is,even if I've moused over, it will do this every single time.We've added the mouse...(slaps forehead) Ugh![Woman] You were doing so well.- I know.

I'm gonna continue.

So we've added this class of animate,but what we want to do is when we hover over this...Wait, I've messed it up.

When we hover over this, it will play this once.It will add this class of once, and keep it on there.Now whenever I go over to hover again, it won't do it,because it's already got this class on it,it's already played this animation.So what we want to do is, when it'sfinished this animation, remove this class.So after this, I'm going to select div.wilson again.

And when this has another event, this one,when the animation has ended, "animationend",we're gonna run a different function.

I'm gonna open it up, makes it a little bit easier to read.And instead of it adding this class,I'm going to remove this class of animate instead.So now what happens is when I hover over here,it plays this animation, and when it's finishedplaying this animation, it will remove this class again.So it looks like it's in a loop.Every single time that I hover over this,it will play this animation.So this looks very, very natural, and it looks likeit's actually doing an animation really well.So we've added a few things.We've added div, class wilson,with then adding a class rather than doing it on hover,because we want JavaScript to actually handle this instead.And instead what I've done is on mouseenter,add this class to play the animation.And once the animation's ended,we're then removing the class so we canplay that animation over and over again.So we get this kind of effect really, really quickly,really, really well, and it's very simple to add.