一段时间以来,我一直试图通过谷歌找到答案,但无济于事。
我在网站上发现了一个有趣的功能:http: //dicksonfong.com/
该功能涉及背景图像,当一个部分通过屏幕时,它似乎从底部发生变化。我无法更好地描述它,这可能就是我在 Google 上没有获得成功的原因。
谁能确定这个技巧叫什么,我在哪里可以找到源代码来实现类似的东西?
提前致谢。
西蒙
一段时间以来,我一直试图通过谷歌找到答案,但无济于事。
我在网站上发现了一个有趣的功能:http: //dicksonfong.com/
该功能涉及背景图像,当一个部分通过屏幕时,它似乎从底部发生变化。我无法更好地描述它,这可能就是我在 Google 上没有获得成功的原因。
谁能确定这个技巧叫什么,我在哪里可以找到源代码来实现类似的东西?
提前致谢。
西蒙
这称为Parallax
效果滚动。它在 UI 方面看起来非常有创意,并且需要很多东西才能工作。如果您想从这里开始,这是一个理想的开始示例。
希望这可以帮助。
以上关于视差的答案是不正确的。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/