みかづきブログ その3

3ヶ月つづけてみました。

background-positionをアニメーションさせる

background-positionは通常jQueryのanimateで操作することができません。
プラグインをつかえば動かすことができるようになりますが、今回は自前で実装してみましょう。
方針としてはjQueryのanimateでmodelの値をイージングをかけて変化しつつ、その値をviewのcssプロパティにいれていこうと思います。


DEMO


JavaScript

(function(win, doc, $) {

    "use strict";
    
    var $x = $(".x"),
        $y = $(".y"),
        $xy = $(".xy"),
        $model = $({x: 0, y: 0}),
        BG_WIDTH = 114,
        BG_HEIGHT = 114,
        INTERVAL = 1000 / 30;
    
    move();
    setInterval(render, INTERVAL);
    
    function move() {
        $model[0].x = 0;
        $model[0].y = 0;
        $model.animate({x: BG_WIDTH, y: BG_HEIGHT}, 1000, move); // 1000msかけて動かす
    }
    
    function render() {
        $x.css({backgroundPosition: $model[0].x + "px " + 0});
        $y.css({backgroundPosition: "0 " + $model[0].y + "px"});
        $xy.css({backgroundPosition: $model[0].x + "px " + $model[0]. y + "px"});
    }
    
})(this, document, $);

いかがでしょうか。
jQueryイージングと組み合わせるとより良い感じになると思います。
今回は以上です。