1

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

我在网站上发现了一个有趣的功能:http: //dicksonfong.com/

该功能涉及背景图像,当一个部分通过屏幕时,它似乎从底部发生变化。我无法更好地描述它,这可能就是我在 Google 上没有获得成功的原因。

谁能确定这个技巧叫什么,我在哪里可以找到源代码来实现类似的东西?

提前致谢。

西蒙

4

3 回答 3

6

这称为Parallax效果滚动。它在 UI 方面看起来非常有创意,并且需要很多东西才能工作。如果您想从这里开始,这是一个理想的开始示例

希望这可以帮助。

于 2013-06-10T11:09:15.647 回答
3

有一个不错的JavaScript 库skrollr,用于制作视差滚动网站。

它要求你只知道HTML 和 CSS

更多例子

于 2013-06-10T11:18:54.350 回答
2

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

想象一下你的滚动速度是 100%。如果图像随着整个页面移动,则它以 100% 的速度移动。如果它根本不动,它会以 0% 的速度移动。如果它以半速移动,则为 50%。视差包含多种移动速度。迪克森的网站只有内容,以 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/

于 2013-06-10T12:51:50.953 回答