Как сделать такое склдывание?

[vladmih]

Всем привет!
Часто на сайтах видел эффекты складывания чего-то по скроллу. Вот например как тут ручка складывается
http://www.fiftythree.com/pencil
Хотел бы спросить у мастеров, нет ли где-то описания как такое сделать, или возможно есть уже готовые библиотеки?
Спасибо!

[Great Rash]

http://prinzhorn.github.io/skrollr/ - ну а дальше ваша фантазия.

[vladmih]

http://prinzhorn.github.io/skrollr/ - ну а дальше ваша фантазия.

Спасибо!

Я тут погуглил, еще одну нашел...

http://scrollme.nckprsn.com/

Просто пока не особо понятно, как это собирать... Но я так думаю, что мере эксперемента все станет ясно...

[Great Rash]

То, что вы нашли выглядит похуже. Например на первый взгляд я не вижу замирания слоя на одном месте во время скролла. Без этого вы не повторите тот эффект, которого хотите достичь.

[vladmih]

То, что вы нашли выглядит похуже. Например на первый взгляд я не вижу замирания слоя на одном месте во время скролла. Без этого вы не повторите тот эффект, которого хотите достичь.

Если конкретно по ручке, замирание колпочка, а потом и всех частей?

А как примерно вообще это должно происходить? На scrollr , это блок который замирает fixed. Он получается не имеет места в блоке... А блок то должен тянуться на высоту копонентов./

Блока родителя.

Edited February 27, 2015 by vladmih

[Great Rash]

Если конкретно по ручке, замирание колпочка, а потом и всех частей?

Именно так.

А как примерно вообще это должно происходить?

Ну высота ручки нам известна. Значит для неё надо сразу создать родителя с определённой высотой, а уже внутри него всё позиционировать. Т.е. при скроле мы сначала назначаем например колпачку position: absolute;, чтобы он скролился вместе со своим содержимым, а на подлёте к середине экрана добавляем ему position: fixed;. И так для каждой отдельной запчасти.