Эффект параллакса?

Question

[Антон Плашкевич]

Здравствуйте, суть в том что на сверстанный сайт нужно запилить эффект параллакса. Облазил гугл , посмотрел готовые библиотеки и все не то, так как параллаксируется именно background-image , а хотелось бы найти ту же готовую библиотеку которая параллаксирует блоки , например

<div class="first-section">
<div> text</div>
<div>text>/div>
</div>

<div class="second-section">
<div> text</div>
<div>text>/div>
</div>

<div class="third-section">
<div> text</div>
<div>text>/div>
</div>

чтобы именно паралаксировались секции. Буду благодарен за помощи или дельный совет

Comments

[Andrew]

эм. И как, по вашему, оно должно работать? где картинка должна быть? или что вы хотите параллаксировать?

[Антон Плашкевич]

Andrew, суть в том чтоб паралаксировался сам див, а не background, так как картинки на backgrounde нету

[Andrew]

Антон Плашкевич, что вы понимаете под словом "параллакс"?
Потому как, - это изменение фона(в данном случае background-image) относительно взгляда пользователя. Я просто не представляю, как что-то другое может меняться/прыгать и т.п., кроме картинки на фоне.
Может, есть примеры?

[Антон Плашкевич]

Andrew, scrollmagic.io/examples/basic/section_wipes_natura... при помощи которого пытаюсь сейчас запилить

[Алексей Скляров]

Скорее всего вам нужен не параллакс, а при прокрутке блоков просто высчитывать постоянно им transform: translateY()

[Антон Плашкевич]

Алексей Скляров, задумывался так же про это накидать на js , если не получится буду пробовать

[Алексей Скляров]

Антон Плашкевич, не надо пытаться, все что вам нужно, уже сделали за вас: https://keithclark.co.uk/articles/pure-css-paralla...

[hckn]

Алексей Скляров, боже мой, да никто не использует параллакс на цсс, пора бы уже понять это. Это галимый, корявый, непригодный в реальной жизни трюк, который существует только для того, чтобы о нем могли писать статьи.

[Алексей Скляров]

hckn, а по-вашему как js-параллакс работает? человеку нужно прокручивать блок, а не фон, самое простое это сделать постоянный перерасчет translateY(). Пример подобной работы был приведен по ссылке. Вы можете предложить человеку свой вариант пригодного, не корявого и не голимого трюка.

[Антон Плашкевич]

Алексей Скляров, спасибо за ссылку, но решил уже проблему, писал сам на js . вешал onscroll событие, и рассчитывал высоту экрана.

Answer 1

[Дмитрий Христоев]

matthew.wagerfield.com/parallax

Comments

[hckn]

Абы вставить свои 5 копеек, называется))

Answer 2

[Алиса Шнайдер]

https://github.com/stephband/jparallax

Comments

[hckn]

Привет, фейковый профиль (даже ВК запилил специально под Тостер лол). Через недельку отлежки спам?

[Алиса Шнайдер]

hckn, Чистые акки не означают, что я вредить пришла

Answer 3

[Эльза Ветрова]

gnatkovsky.com.ua/kak-sdelat-parallaks-fon-na-sajt...