Lesson #7: Animations!
Time for another tutorial!
This time I will go over some fancy hover animation stuff you see so much on themes nowadays.
As an example I will use the links on my first theme (since that's the only one that really has animation). If you hover over the sidebar (which is the parent div for everything in it), the links show up.
It's actually a lot simpler than you would think. Let's start from the beginning: at first, I would always make the theme without animation. You need to see how the div positions itself and such - put all your positions, fonts, margins and stuff in there. For the html there's nothing you need to change - just regularly make your divs.
So I start out with this:
which just looks like
Now what I want is the links div to be invisible at first. We use the CSS attribute opacity for this. Opacity can take any value from 0 to 1 - 0 being completely invisible and 1 being fully visible (which is standard). So we add:
Now the div is still there, but we just can't see it. The next thing we want to do is make it appear when we hover over the sidebar.
To make the hover thing happen, we need to make a new CSS block. We take the name of the div we want to hover over, in this case sidebar, and add :hover. You might have already seen this for links (in that case it's a:hover). When we hover though, we don't want something to happen to the sidebar div, we want it to happen to the links div. We do that by adding #links to the name, like this:
What we really say here is: if sidebar:hover happens, make #links do what's in the block.
And what we want it to do is appear, so we put the opacity back at 1.
That's step one.
But what we see now is that the div just jumps on when we hover: it doesn't have a smooth transition like it should. For that, we need to use web transitions. They're different for all browsers, so we actually need to add three lines: one that starts with -webkit- (chrome and safari) one with -moz- (firefox) and one with -o- (Opera). The syntax is
-...-transition: property duration timing-function (delay);
'Property' is which property of the div should change, for example the width. In the example the whole div has to move, so we use all.
The duration speaks for itself (how long the transition takes, in my case 0.7s).
Timing-function defines the speed curve and it has a few different values:
I usually go with ease because I think it's the nicest, but then again it's all up to you.
At last, you can optionally set a delay time for the hover animation.
We add our transitions to the sidebar:hover div:
If we apply this, we notice the div nicely fades in, but it doesn't fade back out. The exit is still very sudden. That's because we want it to go away when we're not hovering the sidebar, so we're not in the sidebar:hover block anymore. So we also need to add the transitions to the links div.
(nevermind it going red here: the tumblr customizer does this with everything after you use a variable in CSS. I don't know why either. It still works.)
So now we have a nice fade in and out. The only thing left to do is the positioning: I want it to start a bit lower, and then come to the right position. So instead of putting the initial div on a top margin of -30px, I give it -10px and go to -30px in the hover div.
You can of course do this with anything! You can make it slide from the left or the right, make the font go bigger, the width smaller, basically every attribute of a div can change on hover.
You can also use transforms to rotate, translate, scale, and other things!
Well, we've just finished another tutorial on something that seemed hard but is actually rather easy, don't you think?
Okay now I'm actually REALLY gonna need you guys to send me things to do tutorials on, because I'm out of basic things to teach you. You basically already know everything you need to know to make a theme!
(oh by the way if you do make one please send me a message because i would love to see how you guys are doing.)
← previous lesson | next lesson →