0

コンテナー内またはコンテナーの背後にある要素にパララックス効果を与えるクラスを作成しました。

アニメーションの背後にあるバックボーンは、次の方程式です。

coords = (windowTopY - topYPositionOfTheCurrentElement) / speed) * direction

最初は のせいでこれはラグだと思って(windowTopY - topYPositionOfTheCurrentElement)いましたが、それでもラグがありました。

基本的に私がやろうとしているのは、コンテンツよりも遅く、コンテナ内で画像を移動することです。

例: http://lineabridge.v5.cloudsvr.com.au/ & Fiddle : http://jsfiddle.net/SDmdM/1/

それ自体のクラスは次のとおりです。

$.fn.paralaxBackgroundImage = function(method, settings ){
    settings = $.extend({
        element : $('.paralaxImage'),
        magnitude : 2,
        direction : 1,
        winTop : 0
    }, settings);
    var methods = {
        start: function(currentElement) {       
            $(window).on('scroll.paralaxScroll', function() {
                settings.winTop = $(this).scrollTop();

                // Set the new coordinates on the current element
                currentElement.css({
                    marginTop: ((settings.winTop - currentElement.closest('.paralax').position().top) / settings.magnitude) * settings.direction
                });
            }); 
        },
        stop : function() {
            $(window).off('.paralaxScroll');            
        }
    }
    this.each(function() {
        if ((method == 'start' || method === undefined)) {
            methods.start($(this));
        }
        else if (method == 'stop') {
            methods.stop($(this));
        }
    });
    return this;
}
4

0 に答える 0