Ok, I’m so mega busy right now working on Flurl. I need to have it done TONIGHT because I’ve got other pressing obligations coming up and I just won’t have any time to work on it after today.
I wanted to have movement and sound and I wanted it REALLY CORNY as an homage to the flickr pandas from whom it gets it’s photos.
Here’s a little preview (Webkit only).
That’s just a little taste. It’s going to be much more. It’s going to have music and it’s going to have a photo stream.
Just a little tid-bit though I wanted to explain how I animated it (It’s a grand total of 62 lines from <html> to </html>). I didn’t use any JavaScript at all, it’s all CSS3 (amazing!).
First I designed the animation:
@-webkit-keyframes turnit{
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(-364deg);
}
}
Yeah, really simple I know. I’m just telling it to rotate from 0deg to -364deg. Note that I named the animation “turnit”.
Next I applied the animation to my div.
#turningBG{
-webkit-animation-name: turnit;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
-webkit-animation-timing-function: linear;
}
Line 1: use the animation “turnit” we defined before. NOTE THAT THE ANIMATION DEFINITION MUST COME BEFORE WE TRY AND APPLY IT. If I tried to use it before I defined it in my stylesheet, nothing would happen.
Line 2: Loop forever.
Line 3: Last for 30s.
Line 4: Make it smooth (linear). Could ease-in or out or whatever, but I wanted it to be seamless with no apparent start or stop.
Notes: If you look at the source you will see that I made my turning div 3200px wide and tall and then put it inside of a container that was 100% wide and tall and overflow hidden to keep there from being scrollbars. I then positioned the div so the center of it would be right under the unicorn’s foot.
Here’s some reference for css3 animation stuff. Here’s some more.
Here’s the entire “view source”:
About the Author
