単純なパララックス効果を少しの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です。

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

via:DTE :]

URL :
TRB :

Comments & Trackbacks (3)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services