Как грамотно сверстать page header анимирующий при скролле с поднимающимся main?

Question

[Jedi]

Добрый вечер.

Очень вас прошу оставить в ответах примеры реализации именно такой концепции.



Я недостаточно опытный в вёрстке чтобы смог реализовать такое...

Если вам не трудно, оставьте пожалуйста примеры по реализации такого чуда :)

Заранее большое спасибо!

Answer 1

[Andrew]

Оно?
Или я не правильно понял задачу?

Comments

[Jedi]

Нет, тут не в параллаксе дело... Я посмотрел код страницы, там два основных блока. 1-й блок - это просто изображение, а вот второй, там блок с текстом(основной контент), в стилях абсолютное позиционирование с top: 35%... Самая вкусная часть в том, что при сколле изменяются у второго блока следующие данные:

style="transform: translate3d(0px, -34.9009%, 0px);"

Очень вас прошу дать советы по реализации точно такого же эффекте при скролле и этой красоты!)

Answer 2

[Andrej Sharapov]

можно без параллакса. делаешь хидер с фиксированным фоном, под ним контейнер с внешним отступом сверху, скажем, 400px и готово.

Comments

[Jedi]

Спасибо, это ответ, но не совсем на то, что мне нужно...

Комментария Андрею:

Нет, тут не в параллаксе дело... Я посмотрел код страницы, там два основных блока. 1-й блок - это просто изображение, а вот второй, там блок с текстом(основной контент), в стилях абсолютное позиционирование с top: 35%... Самая вкусная часть в том, что при сколле изменяются у второго блока следующие данные:

style="transform: translate3d(0px, -34.9009%, 0px);"

Очень вас прошу дать советы по реализации точно такого же эффекте при скролле и этой красоты!)