Find out more here: http://blog.linuxmint.com/?p=2327
I was going to make a bunch of css files for animating stuff but there is so much you can do with it that it would probably make way to many files, so instead I decided to make this thread where everyone can contribute there own how to's and code snippets for html5, css and javascript animations.
I'll make a list of each css part that can be changed and put it in here so you know where to go and what does what (I'm going to this in a file first then paste it in here).
But until I get that done I thought some others might want to contribute some stuff also.
Also instead of using the bootstrap.min.css file (which has all the white spaces gone and hard to read) just use the bootstrap.css file instead (it has white spaces to make it more readable, just change this part in the index html file from this: css/bootstrap.min.css to this: css/bootstrap.css so it will read that file instead. (there the same file one has white spaces and one doesn't.
You can do the same with js/bootstrap.min.js to this js/bootstrap.js to get the white space one to make any changes you want in that one also. There is one at the top and bottom in the index file for the last one.
I start by showing aa quick and simple sprite sheet animation you can use for the mdm.
First of all create a sprite sheet of your animation (make sure all frames are the same size) this code is for a one row sprite sheet so use only one row (it's one I found on the net somehwere but I'm condensing it down here for you, adding parts you might want and taking out parts you won't need at all).
The quickest way I found to make a sprite sheet is I use a sprite sheet script in gimp, I put each frame on a separate layer (leaving no layers empty) and pressing the sprite sheet from layers it can be gotten here: http://registry.gimp.org/node/20943 (which is one of them) it spaces out each frame for you, saving you the headache and creates a one row sprite sheet for you.
Now you got your moving animation done shove it in the file.
In the theme.css this is the code you need to place your sprite in
Code: Select all
#sprite1 {
width: 300px;
height: 100px;
background-image: url(twoblimp.png);
top:50px;
left:50px;
position:fixed;
}
Code: Select all
#sprite1 {
width: 300px;
height: 100px;
background-image: url(twoblimp.png);
top:50px;
position:fixed;
animation:blimp1 60s infinite;
animation-timing-function:linear;
-webkit-animation:blimp1 60s infinite;
-webkit-animation-timing-function:linear;
}
@keyframes blimp1
{
from { left: -200%;}
to {left: 120%;}
}
@-webkit-keyframes blimp1
{
from { left: -200%;}
to {left: 120%;}
}
animation-timing-function:linear;
-webkit-animation-timing-function:linear;
make sure theres no easing, these two parts
animation:blimp1 60s infinite;
-webkit-animation:blimp1 60s infinite;
gives you the speed of how fast it moves across the screen, the lower the number the faster it goes, infinite means infinite loops, leave this out if you only want it to show up once or use animation-iteration-count:3;
-webkit-animation-iteration-count:3;
to make it show up a certain amount of times.
blimp1 is the name to link this one to the keyframes (trying to think of an easy explanation for this, so forgive me purest lol).
To make a new one just change the sprite name (example instead of #sprite1 add a one #sprite2) and change blimp1 to blimp2 or call it whatyever you want.
There is so many ways you can use css to animate a sprite or anything it's just to much to go into here, so here is a link that will show you most of the ways and things you can do: http://www.w3schools.com/css3/css3_animations.asp
Including rotating, easing, start stop move on etc etc etc, it's pretty much endless of possibilites by mixing stuff together.
Ok that's the css stuff, pretty basic stuff. next the javascript part, you can put this in a separate javascript file and refer to it or just shove it in the index html file between the head tags like any normal javascript stuff.
Here's the code:
Code: Select all
<script type="text/javascript">
$(document).ready(function(){
var frameWidth = 100;
var frameHeight = 50;
var spriteWidth = 800;
var spriteHeight = 50;
var spriteElement = document.getElementById("sprite1");
var curPx = 0;
var ti;
function animateSprite() {
spriteElement.style.backgroundPosition = curPx + 'px 0px';
curPx = curPx + frameWidth;
if (curPx >= spriteWidth) {
curPx = 0;
}
ti = setTimeout(animateSprite, 10);
}
animateSprite();
});
</script>
Code: Select all
var frameWidth = 100; the width of one frame of the sprite sheet, the same as the one you used in the css file
var frameHeight = 50; the height of the sprite sheet
var spriteWidth = 800; the total width of the sprite sheet
var spriteHeight = 50; the height of the sprite sheet
var spriteElement = document.getElementById("sprite1"); what you called it in the css file (#sprite1 part)
ti = setTimeout(animateSprite, 10); is the frame rate speed, the lower the faster it goes through the frames.
Add this into the html where you want the animation to appear.
Code: Select all
<div id="sprite1"></div>
Voila your done.
Nice and simple way to use a one row sprite sheet and move it around the page.
Hope it helps someone out.
Sam