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

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

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

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

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

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

.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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree