От автора: можете воспринимать эту статью, как озарение при работе с CSS. Свойство background-attachment еще никогда не было так полезно для меня. Я всегда воспринимал его, как что-то старое времен GeoCities, когда это свойство использовалось для повторения фонового рисунка и его фиксации на одном месте во время прокрутки страницы.
Как оказалось, фоновые рисунки с фиксированным позиционированием намного полезнее, чем показано в демо выше. Всего одна строка background-attachment: fixed; дает нам возможность создать плавный переход от контента к контенту так, чтобы это только улучшило пользовательский опыт от работы с сайтом. Кроме того, свойство не зависит от JS или тяжелой анимации.
Искусственная презентация
Хотите создать презентацию? Разбить страницу на слайды довольно просто:
1 2 3 4 5 6 |
.slide { background-image: url('path-to-url'); background-attachment: fixed; height: 100vh; width: 100%; } |
Если прописать элемент .slide в HTML коде три раза, то по мере прокрутки страницы один слайд будет перекрывать другой.
Никаких библиотек. Мы не прячем полосу прокрутки. Чистый CSS и полная поддержка браузера (без сенсорных экранов). Можно создать что-то веселое, если соединить с CSS Scroll Snap Points.
Слайд-хедер
Скажем, мы хотим создать необычный хедер, который по мере прокрутки страницы будет перекрываться контентом. Можно сделать.
Мнимая прозрачность
Помните в школе стояли такие проекторы, кодоскопы, и учителям приходилось использовать специальные прозрачные пленки, чтобы показать что-то поверх проецируемого изображения? Мы можем сделать точно так же!
Другие примеры
На CodePen так много замечательных примеров использования фиксированных фоновых рисунков. Мы выбрали лишь несколько из них.
Слайд-панели в начале и середине статьи
Полупрозрачные секции с наклоном
Кинеограф
Разделители статьи в виде заголовков с фоновым рисунком
Изменение заголовка во время переходов по панелям
Этот пример основан не на свойстве background-attachment, но эффект очень крутой и похож на данное свойство.
Автор: Geoff Graham
Источник: //css-tricks.com/
Редакция: Команда webformyself.