0

我编写了一个类来为容器内或容器后的元素提供视差效果。

动画背后的主干是这个等式:

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

起初我认为这是滞后的,(windowTopY - topYPositionOfTheCurrentElement)但它仍然滞后。

基本上我会尝试做的是在容器中移动图像,比它的内容慢。

示例: http: //lineabridge.v5.cloudsvr.com.au/和小提琴: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