function animateDis () {
var src; //your PNGGGGGGG :))))
var result,
xpos = 0,
index = 0,
numImgs = 26, //number of image frames
div,
frameSize = 0 , //width of container
unit = 'px';
var $img = $('<img src="' + src + '">');
$img.bind('load', function () {
$('#id').css('background-image', 'url(' + src + ')');
init();
});
var init = function() {
div = document.getElementById('id');
loop();
result = setInterval(loop, 40); //function + loop time
};
var loop = function() {
div.style.backgroundPosition = (-xpos) + unit + " 0";
xpos += frameSize;
index += 1;
if (index == numImgs) {
clearInterval(result);
}
};
}
An example of looping through a series of PNG's that I did for work last week. Nice for quick and dirty animation sequences. Codepen to come.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.