Способы использования фиксированных фоновых рисунков в CSS

Способы использования фиксированных фоновых рисунков в CSS

От автора: можете воспринимать эту статью, как озарение при работе с CSS. Свойство background-attachment еще никогда не было так полезно для меня. Я всегда воспринимал его, как что-то старое времен GeoCities, когда это свойство использовалось для повторения фонового рисунка и его фиксации на одном месте во время прокрутки страницы.

Как оказалось, фоновые рисунки с фиксированным позиционированием намного полезнее, чем показано в демо выше. Всего одна строка background-attachment: fixed; дает нам возможность создать плавный переход от контента к контенту так, чтобы это только улучшило пользовательский опыт от работы с сайтом. Кроме того, свойство не зависит от JS или тяжелой анимации.

Искусственная презентация

Хотите создать презентацию? Разбить страницу на слайды довольно просто:

Если прописать элемент .slide в HTML коде три раза, то по мере прокрутки страницы один слайд будет перекрывать другой.

Никаких библиотек. Мы не прячем полосу прокрутки. Чистый CSS и полная поддержка браузера (без сенсорных экранов). Можно создать что-то веселое, если соединить с CSS Scroll Snap Points.

Слайд-хедер

Скажем, мы хотим создать необычный хедер, который по мере прокрутки страницы будет перекрываться контентом. Можно сделать.

Мнимая прозрачность

Помните в школе стояли такие проекторы, кодоскопы, и учителям приходилось использовать специальные прозрачные пленки, чтобы показать что-то поверх проецируемого изображения? Мы можем сделать точно так же!

Другие примеры

На CodePen так много замечательных примеров использования фиксированных фоновых рисунков. Мы выбрали лишь несколько из них.

Слайд-панели в начале и середине статьи

Полупрозрачные секции с наклоном

Кинеограф

Разделители статьи в виде заголовков с фоновым рисунком

Изменение заголовка во время переходов по панелям

Этот пример основан не на свойстве background-attachment, но эффект очень крутой и похож на данное свойство.

Автор: Geoff Graham

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: