Как мне сделать этот вид фиксированной прокрутки изображения?

Question

Как мне сделать этот вид фиксированной прокрутки изображения?

0

http://www.polygon.com/2013-game-of-the-year Как сделать такую прокрутку фиксированного изображения? Я не знаю, что искать. Может ли кто-нибудь из вас порекомендовать хороший учебник?

Jesse Leite 16 янв. 2014, в 21:44

Источник

Теги:

javascript

html

css

parallax.js

4 ответа

Ещё вопросы

hsz · Answer 1 · 2014-01-16T18-52-00.000Z

Вы ищете parallax. Существует несколько библиотек, которые позволяют вам достичь этого - например parallax.js

thiagopneto · Answer 2 · 2014-01-16T19-02-00.000Z

Это Параллакс! Вот простой пример для обучения ваших навыков.

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

Cya! Gl; p

joshas · Answer 3 · 2014-01-16T17-18-00.000Z

Я думаю, что вы ищете фиксированную прокрутку фона. Взгляните на эту демонстрацию: http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/

Kad · Answer 4 · 2014-01-16T18-14-00.000Z

Это на самом деле довольно просто. Если я правильно понимаю, о чем вы говорите. То, что вы просматриваете, укладывается без повторного использования фона 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;
}