Question

我一直试图通过谷歌找到答案一段时间，但无济于事。

我在网站上遇到了一个有趣的功能：http://dicksonfong.com/

该功能涉及背景图像，当一个部分向上通过屏幕时，该图像似乎从底部变化。我无法更好地描述它，这可能就是为什么我没有在谷歌上点击。

任何人都可以确定这个技巧被调用了什么，以及在哪里可以找到实现类似内容的源代码？

提前致谢。

西蒙

Answer 1

这称为Parallax效果滚动。它在UI方面看起来非常有创意，并且涉及很多工作。如果你想开始，这是一个Ideal example for a start。

希望这有帮助。

Answer 2

制作视差滚动网站有一个很好的JavaScript library called skrollr。

您只需知道 HTML和CSS 。

更多examples。

Answer 3

以上关于视差的答案是不正确的。 Parallax确实创造了一些令人惊叹的网站。但是，您链接到的那个（http://dicksonfong.com/）不会使用它。这是因为当一个人有多个级别以不同的速度移动时会发生视差。

想象一下，滚动的速度是100％。如果图像随整个页面移动，它将以100％移动。如果它根本不移动，它将以0％移动。如果它移动半速，50％。视差包含多种移动速度。 Dickson的网站只有内容，移动率为100％，背景为100％或0％。由于0％表示不动，因此移动物品的移动速度只有一个。

也就是说，它仍然是一个很酷的网站，因为它更简单，它更容易创建，需要零javascript（或HTML5）。他只是使用固定背景和绝对定位。他的第一排和第三排有固定的背景。这允许它们保持原位。

示例代码：

HTML：

<div id="home" class="page">

    <div class="content">

        <h1>First Page</h1>

        Content here!

    </div>

</div>

<div class="divider">

    <div class="content">Divider</div>

</div>

<div id="about" class="page">

    <div class="content">

        <h1>First Page</h1>

        Content here.

    </div>

</div>

CSS：

body{
    margin:0;
    padding:0;
    font-size:80px; 
    font-family:Calibri; 
    font-weight:bold; 
    text-align:center;
    text-shadow:0px 0px 4px white;
}

.page {
    margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    height: 800px;
}

.divider {  
    height: 300px;
    margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
}

.page .content {
    height: 450px; 
    top: 100px; 
    position: absolute;
    width: 100%;
}

.divider .content { 
    padding-top:50px; 
    height: 250px; 
    position: absolute;
    width: 100%;
}

#home { 
    background: url(background_home.jpg) no-repeat fixed 50% 0 / cover;  
}
#about { 
    background: url(background_about.jpg) no-repeat fixed 50% 0 / cover;
}

工作示范：http://jsfiddle.net/6Hck4/1/

背景图像的微妙变化

3 个答案: