0

見つけたチュートリアルに基づいて視差スクロール効果を実装しました。効果は抜群です。ただし、背景画像を指定すると、y (垂直) 軸を制御できません。複数のレイヤー化された画像に場所を設定しようとしているため、これが問題を引き起こしています。

問題の原因について何か考えはありますか?

以下は外部スクリプトの 1 つです。

$(document).ready(function(){
$('#nav').localScroll(800);

//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#mainimagewrapper').parallax("50%", 1.3);
$('#secondaryimagewrapper').parallax("50%", 0.5);
$('.image2').parallax("50%", -0.1);
$('#aboutwrapper').parallax("50%", 1.7);
$('.image4').parallax("50%", 1.5);

}))

これは別の外部スクリプトです。

(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);

1 つのセクションの CSS は次のとおりです。

#aboutwrapper {
background-image: url(../images/polaroid.png);
background-position: 50% 0;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
height: 500px;
width: 100%;
margin: 0 auto;
padding: 0;
}

#aboutwrapper .image4 {
background: url(../images/polaroid2.png) 50% 0 no-repeat fixed;
height: 500px;
width: 100%;
margin: 0 auto;
padding: 0;
}

.image3{
margin: 0 auto;
min-width: 970px;
overflow: auto;
width: 970px; 
}

これらは両方とも、視差スクロールを実現するために呼び出されています。背景画像の場所をより具体的に制御したいだけです。CSS の背景位置をいじってみましたが、最初の JavaScript スニペットもいじりました。運がない。

4

1 に答える 1

0

簡単なショットですが、実際に画像をdivに配置するか、背景画像のy軸を操作するのではなく、img srcタグを使用して要素を実際に移動してみましたか？

于 2013-02-08T18:50:17.347 に答える