javascript - パス、カーブ、ラインに沿ってスクロール

Question

Joel Besada の jquery.scrollpath のようなカスタム スクロールパスを計算するための、より単純な (肥大化の少ない) 関数/プラグインについて知っている人はいますか?

私が必要としているのは、事前定義されたパスに沿って DOM-Node を移動させる方法です。Math.cos と Math.sin (曲線に沿って移動する) については知っていますが、数学の天才ではありません。

Answer 1

はい、わかった！

// Shamelessly stolen and ported from https://github.com/weepy/jquery.path
$.fn.arc = function (options) {
    options = $.extend({}, {
        center: [0, 0],
        radius: 0,
        start: 0,
        end: 0,
        dir: 1,
        rotate: true
    }, options);

    while (options.start > options.end && options.dir > 0) {
        options.start -= 360;
    }

    while (options.start < options.end && options.dir < 0) {
        options.start += 360;
    }

    var css = {};
    return this.each(function(){
        var self = $(this),
            win = $(window),
            doc = $(document);

        win.scroll(function(){
            var now = 1 - (1 * win.scrollTop() / (doc.height() - win.height())),
                a = (options.start * (now) + options.end * (1 - (now))) * Math.PI / 180;

            css.left = (Math.sin(a) * options.radius + options.center[0] + 0.5) | 0;
            css.top = (Math.cos(a) * options.radius + options.center[1] + 0.5) | 0;

            if(options.rotate){
                css.transform = "rotate(" + Math.atan2(options.center[1] - css.top, options.center[0] - css.left) + "rad)";
            }
            self.css(css);
        });
    });
};