我该如何进行这种固定图片滚动？

Question

http://www.polygon.com/2013-game-of-the-year如何进行此类固定图片滚动？我不知道该搜索什么。你们中的任何人都可以推荐一个好的教程吗？

Answer 1

您正在寻找parallax。有几个库允许您实现它 - 例如parallax.js

Answer 2

我认为您正在寻找固定的背景滚动。看看这个演示： http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/

Answer 3

这是Parallax！ 这是一个训练你的技能的简单例子。

http://www.webdesign.org/how-to-create-a-parallax-scrolling-website.22336.html

氰！ G1; p

Answer 4

这实际上相当简单。如果我正确理解你所指的是什么。您正在查看的内容是无重复后台css属性。即使它看起来像一些固定的滚动，它也没什么特别的。以下是您的示例中的一个：

<div class="game-section tearaway g10 clearfix">
<img class="number ten" src="http://cdn0.sbnation.com/polygon/2013-goty/10.png"><div class="game-section-text">
<h2>Tearaway</h2>
<a href="http://www.polygon.com/vita/2014/1/13/5304198/game-of-the-year-2013-tearaway"> Read Why       <img src="http://cdn0.sbnation.com/polygon/2013-goty/arrow.png"></a>
</div>
</div>

例如，这里有以下css属性分配给类tearaway

tearaway {
  background: url(http://cdn0.sbnation.com/polygon/2013-goty/tearaway.jpg) center no-repeat;
}