0

我试图实现视差滚动到我的网站。这几乎是完美的。问题是，我想几乎在底部有一个视差部分。当我向下滚动时，是我在上方设置为背景图像的图像，如下所示： 在此处输入图像描述

照片应该已经停在灰色部分的开头，您会看到下面的内容。

我的代码：

// Can also be used with $(document).ready() / $(window).load()
$(document).ready(function() {
    // Cache the Window object
    $window = $(window);

    $('section[data-type="background"]').each(function(){
    var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {

            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });

        }); // window scroll Ends

    }); 

    });

在 HTML 标记下方：

<section class="quote" id="quote-home" data-speed="4" data-type="background">
    <div class="container_12">
        <header class="grid_12 centered">
            <h1>
            The beginning of knowlegde
            <br>
            is the discovery of something 
            <br>
            we do not understand.”
            </h1>

            <span class="cross-x"></span>

            <h2>- Frank Herbert</h2>
        </header><!-- End header.grid_12 --> 

    <div class="clear"></div><!-- End div.clear -->
    </div><!-- End div.container_12 -->
</section><!-- End section#quote -->

<section id="twitter" class="alt">

和CSS：

#quote-home {
    height: 500px; 
    margin: 0 auto; 
    width: 100%; 
    max-width: 100%; 
    position: relative; 
    background: url(../images/coffeescripthands.jpg) 50% 0 no-repeat;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}
4

0 回答 0