Функция pseudoAnimate позволяет анимировать элементы страницы, для которых созданы спрайты из нескольких картинок.
Спрайты устанавливаются, как background для элементов. Функция выполняет цикличную замену координаты Y для фона.
Функция позволяет установить время смены фрагментов спрайта, включить или выключить цикличность анимации, установить время промежутка между циклами и время, которое будет длиться анимация.
function pseudoAnimate(element, options, time) {
options = $.extend({
frames: 1,
timeout: 500,
cycle: true,
cycleDelay: 0,
timeForAllCycles: 0
}, options);
var _timeForAllCycles = 0;
if (time) {_timeForAllCycles = time;}
if (options.cycle == 'false') options.cycle=false;
if (navigator.userAgent.search("MSIE") < 0)
{
var offset = /([\S]+)\s([\S]+)/i.exec($(element).css('background-position').trim());
var offsetX = parseInt(offset[1]);
var offsetY = parseInt(offset[2]);
} else {
var offsetX = parseInt($(element).css('background-position-x'));
var offsetY = parseInt($(element).css('background-position-y'));
}
var frame = Math.abs(offsetY / $(element).height()) + 1;
var timeout = options.timeout
if (frame < options.frames) {
offsetY = offsetY - $(element).height();
} else {
offsetY = 0;
timeout = options.cycleDelay != 0 ? options.cycleDelay : options.timeout;
}
if(navigator.userAgent.search("MSIE") >= 0) {
$(element).css({
'background-position-y': offsetY +'px'
});
} else {
$(element).css({
'background-position': offsetX + 'px ' +offsetY+'px'
});
}
if ((frame < (options.frames-1)) || options.cycle) {
if ( options.timeForAllCycles == 0 || (options.timeForAllCycles != 0 && _timeForAllCycles<options.timeForAllCycles ))
setTimeout(function(){
pseudoAnimate(element, options,_timeForAllCycles+Number(timeout));
}, timeout);
}
}
В статье используется функция, применяемая на сайте http://www.lill-skansen.se/
Применение функции:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation</title>
<style>
/* Demo styles */
#chrismas {
position: relative;
}
#moon {
position: absolute;
top: 35px;
left: 85px;
height: 48px;
width: 46px;
background: url("images/moon.png") 0 0 no-repeat transparent;
}
</style>
<!-- load jQuery -->
<script src="js/jquery.min.js"></script>
<!-- load Galleria -->
<script src="js/script.js"></script>
</head>
<body>
<div class="content">
<h1>Animation</h1>
<div id="chrismas" ><img src="images/christmas.png" alt="">
<!--Element with id="moon" will be animated. Set options for pseudoAnimate in this tag wth attributes data-->
<!--data-frames - number of frames, data-timeout - time of changing each frame, data-cycle - true/false, data-delay - time between cycles,-->
<!--data-time - time For All Cycles-->
<div id="moon" class="animation" data-frames="4" data-timeout="400" data-delay="2000"></div>
</div>
</div>
</body>
</html>
Инициализация
$(document).ready(function(){
$('.animation').each(function() {
pseudoAnimate(this, {
frames: $(this).data('frames'),
timeout: $(this).data('timeout'),
cycleDelay: $(this).data('delay'),
cycle: $(this).data('cycle'),
timeForAllCycles: $(this).data('time')
});
});
})
Демо