So, last time I made a lovely robot out of divs. Well, I did that by stacking (literally) a few divs on top of each other and centering them to make a robot. That's pretty simple, but in order to have that robot move around on the page, its position needs to be relative to the edges of the page, not just centered in the middle of it.
By applying position: relative to the divs, I can move them around by using left: right: top: bottom: and giving pixel numbers to push them from those sides of the window.
While those move my robot pieces in two dimensions, I can also layer the pieces in the 3rd dimension, z-index: by using positive or negative numbers. If a blue circle has a z-index: -3 and a red circle has a z-index: 0 (which is the default, even if you don't apply a z-index) then the blue circle will be BEHIND the red circle.
Z-index does not scale the size of the elements. Also, if there is no declared z-index and two elements overlap, the one closest to the bottom will be shown first. (There's that cascade again!)
So here the wheel of my robot was moved up a little and given a negative z-index to be behind the torso. Also I made two other divs (inside the torso div) that contain J's, and rotated them and flipped one and pushed them behind the the torso. Woohoo.
As you guys can see above, I gave the right arm a special font, flipped it on it's Y axis (scaleY(-1)), rotated it, added some vendor prefixes for the whole "transform" thing, and then did other stuff to move it into place.
We also contained the pieces of the robot in one big robot div, and nested the divs for the arms in with the torso div:
BAM.
Now to animate those eyeballs.
Cotter, who is now much uglier than I remember, is yelling at me for his lasers. Those eccentric millionaires just don't know how to chill out..
So to do this, we're going to use an @ rule called keyframes. What @keyframes does is it modifies the state of something for a period of time, and then sets it back the way it was. We'll use this to modify the white glowy-eyes of our robot to become red for 50% of the time, over a duration of .5 seconds (.25 white, .25 seconds of red) that will loop for forever.
In order to do this, we need to define the keyframes rule and then assign it to the element it will be affecting.
Here is my definition of the keyframes rule, we've called it "blink":
Had to add in a bunch of vendor prefixes to be safe and make sure that it runs on all browsers.. but here's the breakdown of the syntax...
50% of the way through our timeperiod for the keyframe (which we'll define later, when we actually assign the keyframe), the background will take on the aspect of having a circle red gradient.
Above, I've assigned the animation "blink" to the brain div and given it a 0.5s time period and an infinite loop. This will modify the background of the brain div (the eyes) to be what we define in the animation (red) for 50% of the time (0.25 seconds) and to blink for FOREVER.
Cool. But Cooter--I mean Cotter still isn't happy. He wants to be able to turn the lasers on and off, not just have them shooting out for forever. I guess I get where he's coming from.. so we'll cover how to do that in the next blog post!
For now I need to go make some COOKIES. <3 bye="" christmas.="" guys="" merry="" p="">
No comments:
Post a Comment