Как правильно сделать параллаксное «перелистывание» на CSS?

Question

[kepo]

Речь о подобном эффекте - https://demo.tutorialzine.com/2015/09/6-practical-...

Пример на словах подробнее. Имеем 4 блока во весь экран. Первый и третий блоки - картинки. Картинки нужно зафиксировать, и после "перелистывания" вторым блоком с контентом вместо прилепленного первого блока выезжает третий.

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

Comments

[Сергей delphinpro]

Весь фокус заключен в одном правиле
background-attachment: fixed;

[kepo]

Сергей: ну вот почему все в жизни не может быть так же просто? Наверное вынесите ответ, ведь это решение)))

[kepo]

Жаль что хреновая поддержка на мобильных.

[Максим]

kepo: а там не только background-attachment там и js ещё есть (по ссылке)

[kepo]

Максим Ленский: шо серьезно? Ну спасибо, теперь все ясно. Вот я дурак.

[Максим]

kepo: https://codepen.io/LenskyUser/pen/mwEaqR так ??

[Сергей delphinpro]

Максим Ленский: Это не решение проблемы. При изменении размера шрифта все летит к черту.
Честно говоря, я с ходу тоже не смог придумать решение.
Может быть стоит продолжить мозговой штурм в таком ключе? - https://codepen.io/delphinpro/pen/EXyrvN?editors=0100
Не могу сообразить как вычислить коэффициент "-3" без подбора

[Максим]

Сергей: так получается тоже не вертикально по центру , этот тип только оскарблял но не смог сказать что надо - можно вообще на label сделать и 100% попадёт в центр

[Максим]

Сергей: и да я забыл сказать - задача то была в в том что бы placehold и font у input был разный

[Максим]

Сергей: где задачка ??

[Сергей delphinpro]

Максим Ленский: выровнять плейсхолдер по вертикали без магических чисел. разве не интересно?

[Максим]

Сергей: я стараюсь не извращаться - просто translate и всё

[Froggyweb]

Сергей: магические числа в em? на мой взгляд достаточно

[Сергей delphinpro]

Froggyweb: В данном случае, если будет получен какой-то коэффициент в любом измерении, и который не нужно будет изменять при изменении размера шрифта инпута (один раз написал и забыл), то я в принципе соглашусь. Но у меня пока не вышло.

Answer 1

[Sergiu Mitu]

для 1 и 3 блока - background-attachment: fixed
второй блок на высоту экрана.

Comments

[kepo]

А для всего дива (всключая контент, h2, p и тд) - есть подобное решение?

[Sergiu Mitu]

kepo: так для див и укажите, ничего мешать не должно

[kepo]

Сергей: ну так это применяется только к картинке, я же говорю - надо к контенту.