How do I do this kind of fixed picture scrolling?

Question

http://www.polygon.com/2013-game-of-the-year How do I do this kind of fixed picture scrolling? I don't know what to search for. Can any of you recommend a good tutorial?

Answer 1

You are looking for parallax. There are several libs that allow you to achieve it - for example parallax.js

Answer 2

I think you are looking for fixed background scrolling. Take a look at this demo: http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/

Answer 3

This is the Parallax! Here is a simple example to train your skills.

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

Cya! Gl ;p

Answer 4

This is actually fairly simple. If I correctly understand what you're refering to. What you're looking at is stacked with a no repeat background css property. Even though it looks like some fixed scrolling, it's nothing fancy. Following is one of those from your example :

<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>

For instance here there's the following css property assigned to the class tearaway

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