Parallax H1 and H2



有人可以告诉我如何调整这个.js吗?我希望它能够在 H1 和 H2 上申请,并在我的 html 中使用 ID。现在它只适用于 css 背景图像。以下是我正在使用的.js。我是javascript的初学者;)

希望你们能帮助我!

    (function( $ ){
    var $window = $(window);
    var windowHeight = $window.height();
$window.resize(function () {
    windowHeight = $window.height();
});
$.fn.parallax = function(xpos, speedFactor, outerHeight) {
    var $this = $(this);
    var getHeight;
    var firstTop;
    var paddingTop = 0;
    //get the starting position of each element to have parallax applied to it      
    $this.each(function(){
        firstTop = $this.offset().top;
    });
    if (outerHeight) {
        getHeight = function(jqo) {
            return jqo.outerHeight(true);
        };
    } else {
        getHeight = function(jqo) {
            return jqo.height();
        };
    }
    // setup defaults if arguments aren't specified
    if (arguments.length < 1 || xpos === null) xpos = "50%";
    if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
    if (arguments.length < 3 || outerHeight === null) outerHeight = true;
    // function to be called whenever the window is scrolled or resized
    function update(){
        var pos = $window.scrollTop();              
        $this.each(function(){
            var $element = $(this);
            var top = $element.offset().top;
            var height = getHeight($element);
            // Check if totally above or totally below viewport
            if (top + height < pos || top > pos + windowHeight) {
                return;
            }
            $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
        });
    }       
    $window.bind('scroll', update).resize(update);
    update();
};
})(jQuery);

它应该是background-position .你能尝试改变吗?

$this.css('background-position', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");

相关内容

  • 没有找到相关文章

最新更新