この記事は 約 0分20秒 で読めます。
★背景画像のpositionを操作するタイプのアニメーション
背景画像のポジションをタイマーを使って変えています。data-switchという属性の番号を見て次の位置を判断しています。
もうすこし考えればここも動的にできると思いますね。結構ありきたりかな?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
function playAnimation(){ clearLoopAnimation(setTimeoutTimerId); $('セレクタ').attr('data-switch', 'switch01') .each(function(index) { loopAnimation($(this), index); }); } function loopAnimation(target, index){ if(target.attr('data-switch') === 'switch01'){ target.css({ 'background-position': 'top left' }) .attr('data-switch', 'switch02'); } else if(target.attr('data-switch') === 'switch02'){ target.css({ 'background-position': 'bottom left' }) .attr('data-switch', 'switch03'); } else { target.css({ 'background-position': 'top right' }) .attr('data-switch', 'switch01'); } setTimeoutTimerId[index] = setTimeout(function() { loopAnimationTop(target, index); }, 400); } function clearLoopAnimation(arry){ for (var i = 0; i < arry.length; i++) { clearTimeout(arry[i]); } } |