Question

如何在单页设计和不同图像位置的不同部分进行视差？

现在我正在处理这段代码。

HTML标记：

<section class="highlights">
    <img src="images/hero.jpg" alt="" />
</section><!-- End section.highlights -->

图像的CSS是

#hero, .highlights {
    height: 360px;
    padding: 0;
    position: relative;
    overflow: hidden;
    opacity: 0.9;

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

    z-index:1;
}
#hero img {
    height: auto;
    width: 100%;
    margin: 0 auto; 
    display: block;
    position: relative;
}

JS：

    $('#hero img').css({"bottom": '-' + $(window).scrollTop() / 2 + 'px' });

Answer 1

我建议使用像Skrollr.js这样的JavaScript库。

您可以很好地控制动画和时间。

查看我们的这两个教程，开始使用Skrollr：

如何在不同的部分进行视差工作（一页）

1 个答案: