Как реализуются подобные лендинги?

Question

[svilkov87]

Добрый день!
Есть пример лендинга шаблон

Интересует вопрос реализации таких лендингов, а именно:
1. При скролле есть неподвижные блоки с background-image, а сверху них блоки/секции, которые "реагируют на скролл". Видно, что таких неподвижных background-image в шаблоне есть как минимум три. Как их располагать? Какие свойства им задавать?
Отладчик f12 мне не помог разобраться..((
2. Как называется такой подход в верстке( если вообще есть у него название)?

Буду благодарен за ответ.

Comments

[developer007]

гуглите parallax effect там будут подобные примеры

Answer 1

[T_y_l_e_r]

Вроде там просто div друг за другом и укаждого дива свой бэкграунд с фиксом, а так же контент который идет поверх и устанавливает высоту.

ВОТ
codepen.io/anon/pen/rjoyxv

Comments

[T_y_l_e_r]

vserv ты откуда взялся клоун? я взял код из исходника шаблона который svilkov87 скинул и удалил все лишнее.

Answer 2

[Игорь]

Если я правильно понял вопрос, то у тех секций с заданным фоном - картинкой просто стоит свойство background-attachment: fixed; и при скролле создается такой визуальны эффект.

Answer 3

[Алина Брэнн]

я думаю это подойдет, если значения покрутить Simple Parallax Scrolling

Comments

[automatik]

паралакс в данном случае - это когда фоновое изображение слегка подвижно при скролле страницы. Там оно статично, поэтому достаточно просто два div с разным фоном.

Answer 4

[Кира]

Как-то так

Answer 5

[smiros]

webdesignmaster у себя на канале размещал подробное видео верстки в том числе с применением подобного эффекта