MJHD

エモさ駆動開発

パララックス効果っぽいjQueryプラグイン

パララックス効果っぽいjQuery プラグイン作ってみた．適当．

SVGファイルは，一緒に動かしたいレイヤーごとにグループ化して，IDを割り振っといてください．
layersでそのID名を指定します．
指定した順に視差が設定されます．
※パスやグループにあらかじめtransform属性が存在すると動きません．削除してください．

サンプル f:id:wait0000:20160329202422p:plain

jquery.parallax.js


(function ($) {
    $.fn.parallax = function(options) {
        var defaults = {
            svgFile: "",
            layers: [],
            distance: 0.1
        };

        var setting = $.extend(defaults, options);

        var $this = this;

        $.get(setting.svgFile, function (data) {
            $this.append($(data.documentElement));

            $this.mousemove(function (e) {
                var width = $this.width();
                var height = $this.height();

                $.each(setting.layers, function (i, val) {
                    $("#" + val).attr({
                        "transform": "translate(" + (e.clientX - width / 2) * (setting.layers.length - i) * setting.distance + ", " + (e.clientY - height / 2) * (setting.layers.length - i) * setting.distance + ")"
                    });
                });
            });
        });
    };
})(jQuery);

HTML


<!doctype html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="parallax"></div>
        <script type="text/javascript">
$(function () {
    $("#parallax").parallax({
        svgFile: "test.svg",
        layers: ["layer-1", "layer-2", "layer-3"]
    });
});
        </script>
    </body>
</html>