Сегодня случайно зашел на сайт
https://11.uisgcon.org/ua
Внизу там есть контент на фоне макбука.
При прокрутке создается ощущение, что задний фон зафиксирован, а прокручивается только лишь контент.
Кто-то может вкратце описать, как такое реализовать?
При помощи z-index и прозрачности блока.
Обрати внимание на элементы
#highlighted-bottom
и
#highlighted-bottom-transparent-bg
Есть блок со стилем:
background: url("images/parallax-bg.jpg") 50% 50% no-repeat fixed;
margin: -1px 0 0 0;
position: relative;
z-index: 2;
Большая часть страницы имеет фон белый, поэтому нам фон не видно.
Там где нам видно фиксированный фон, страница имеет прозрачный фон.
Спасибо) Вроди бы разобрался)
Немного не понятно с
здесь контейнеру id="highlighted-bottom-transparent-bg" задается инлайновый стиль с прозрачностью 80%.
style="background-color: rgba(255, 255, 255, 0.8);"
Ведь именно этот слить и делает еффект прозрачности картинки?
Другими словами, это просто fixed бекграунд-картинка, воровненная по центру с наложенным 80%-м белым слоем. Я верно понял?
Интересная верстка)
такой вариант работает:
background-image: url("somepicture.jpg");
background-attachment: fixed;
background-size: cover;
background-position: center center;
вот для наглядности http://katedreamer.github.io/works/cabanawp/index.html
Да, все верно.
если я не ошибаюсь то этот эффект называться паралаксом (parallax) - вот сборная статья на хабре.