単純なパララックス効果を少しのjQueryコードで作る

シンプルなパララックス効果
を少しのjQueryコードで作る
というTips。プラグイン化さ
れていますのでレイヤーの追加
も簡単です。

個人的にはあまり見かけなくなった印象のパララックス効果のあるサイトですが、まだ需要はあるみたいです。

今日は単純なパララックス効果のあるコンテンツを少しのjQueryコードで作るTipsです。

Sample

マウスに合わせてレイヤーが動きます。

コード

(function($) {
    $.fn.paralax = function(container, speed) {
        var $window = container,
            t = speed || 1,
            $object = this;
        return $window.on("mousemove resize", function(e) {
            $object.css({
                top: -(e.pageY - $window.height() / 2 - $window.offset().top) * t + $window.height() / 2,
                left: -(e.pageX - $window.width() / 2 - $window.offset().left) * t + $window.width() / 2
            });
        });
    };
})(jQuery);

レイヤーを重ねるごとにオブジェクトの位置とスピードを変える。

$(function() {
    var area = $('#container');
    $('#layer-1').paralax(area, 1);
    $('#layer-2').paralax(area, 2);
    $('#layer-3').paralax(area, 3);
    $('#layer-4').paralax(area, 4);
});

セッティングは重ねるレイヤーに数字を振ればOKです。

レイヤーのスピードは変えられないので単純なものしか作れませんけど、素敵なアイデアだなぁと思いました。