Создайте эффект замаскированного фона с помощью CSS

Создайте эффект замаскированного фона с помощью CSS

От автора: Сегодня мы собираемся познакомиться с по-настоящему классной техникой, которую вы можете использовать для создания эффекта, немного напоминающего параллакс скроллинг (parallax scrolling), но без необходимости использовать JavaScript; этого можно добиться очень просто, используя чистый CSS-код.

 

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

Эту технику можно использовать для создания великолепных страниц с описанием продукта или даже чего-то наподобие Powerpoint/Keynote презентации, и, возможно, она замечательно подойдет для онлайн-иллюстрации какой-нибудь истории. Вот как это создается.

Все сводится к использованию CSS

Ключевым для этой техники является CSS-свойство background-attachment: fixed; , которое доступно с версии CSS 2.1. Любое фоновое изображение, к которому применяется данное свойство, останется в фиксированном положении относительно окна браузера (а не элемента, к которому оно относится). Мы воспользуемся этим, чтобы сохранить на заданном месте наши изображения, в то время как контент будет независимо прокручиваться вверх/вниз.

Есть несколько моментов, о которых стоит помнить при использовании данного свойства. Во-первых, поскольку фоновое изображение будет зафиксировано относительно окна браузера, на его расположение не будут влиять, например, отступы (margins), как в случае с обычным фоном.

Во-вторых, вам следует знать, что несмотря на то, что это свойство прекрасно работает в десктопных версиях браузеров, оно не работает в настоящее время в мобильной версии Google Chrome и может не совсем корректно работать в других мобильных версиях браузеров. Таким образом, посетители вашего проекта/сайта без проблем увидят ваши изображения, но эффект скроллинга в данном случае лучше всего смотреть на настольных компьютерах/ноутбуках.

Как это создается

Вот основные шаги для достижения того же результата, что и в демо-примере:

Создаем контейнер и добавляем в него контент.

Устанавливаем для одной стороны контейнера (блок div в нашем случае) отступ (padding) равный примерно 50% ширины, таким образом, отодвинув контент на другую сторону.

Добавляем фоновое изображение, также равное примерно 50% ширины, и позиционируем его на противоположной стороне от контента.

Устанавливаем свойство background-attachment: fixed; и наблюдаем за магическим эффектом скроллинга!

Давайте рассмотрим последовательно шаг за шагом, как это все происходит. Вы также можете скачать исходные файлы для этого урока, чтобы у вас были необходимые изображения.

1. Базовая настройка

Начните с создания папки для вашего проекта и добавления туда файла index.html, а также папки css с файлом style.css. Скопируйте и вставьте четыре изображения из архива zip, который вы скачали, в папку images.

Вставьте следующий HTML-код в файл index.html:

На данном этапе мы создаем наш HTML каркас, подключаем таблицу стилей и некоторые шрифты от Google Fonts, а затем создаем наш первый контейнер (блок div.content), к которому будем применять данную технику.

Контейнеру div заданы три класса:

.content — используется для задания параметров, которые будут общими для всех контейнеров, содержащих контент.

.right — определяет, что контент данного контейнера должен быть выровнен по правому краю (позже мы также поработаем над контейнером, контент которого выровнен по левому краю).

.illustration_01 — используется, чтобы задать определенное фоновое изображение и цвет для контейнера.

Применяем стили

Теперь мы готовы добавить немного CSS. Начните с добавления в ваш файл style.css стилей, которые структурируют и отформатируют ваш HTML-код нужным образом.

Теперь добавим стили для блока с классом .content. Добавьте следующий код в конец вашей таблицы стилей:

Это как раз тот класс, от которого и зависит большая часть волшебства. Для текста мы устанавливаем размер шрифта и цвет. Для фона мы вначале мы устанавливаем свойство background-size со значениями 49% auto.

Это означает, что фоновое изображение всегда будет растягиваться или сжиматься, чтобы заполнить 49% от ширины страницы, а высота сама будет пропорционально вычисляться. Мы используем значение 49% вместо 50%, потому что, в противном случае, в браузере Firefox появляется странная полоска, явно лишняя, посередине экрана.

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

Наконец, мы устанавливаем свойство background-repeat: no-repeat; , чтобы наше изображение не повторялось на странице.

Затем добавьте в вашу таблицу стилей класс .right:

Этот последний класс располагает текстовое содержимое на одной половине экрана, а фоновое изображение — на другой.

Значения свойства background-position говорят браузеру о том, что фоновое изображение должно иметь нулевой отступ от левого края экрана и наполовину высоты отступать вниз от верхнего края экрана.

И напоследок добавьте класс .illustration_01:

Этот класс задает определенное фоновое изображение и цвет для данного контейнера. Если вы проверите результат на вашем сайте, то вы должны увидет это:

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

2. Добавьте второй контейнер

Давайте добавим еще один контейнер, с контентом выровненным по левому краю. Добавьте следующий HTML-код для этого контейнера под предыдущим блоком div:

Обратите внимание, что на этот раз мы используем класс .left вместо .right. И мы изменили номер для класса .illustration_01 на .illustration_02. Добавьте в вашу таблицу стилей следующие два новых класса:

На этот раз мы установили значение для отсутпа 50% для правой стороны, поэтому контент переместится налево, а для фонового изображения мы установили значение 100%, т.е. оно переместится вправо. Мы также задали другой цвет и фоновое изображение для этого контейнера.

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

3. Добавьте разделитель

Усилить эффект этой техники можно за счет добавления разделителя между двумя контейнерами. Поэтому давайте сейчас это и сделаем. Добавьте следующий HTML-код между вашими двумя контейнерами:

И добавьте в вашу таблицу стилей класс .separator:

Когда вы обновите ваш сайт, то вы должны увидеть симпатичный разделитель между двумя контейнерами:

4. Третий и четвертый контейнеры

Теперь вы можете добавить HTML-код для оставшихся разделителей и контейнеров. Добавьте следующий HTML-код после существующих блоков div:

И этот CSS-код необходимо добавить в вашу таблицу стилей:

Теперь с добавлением третьего и четвертого контейнера у вас должна получится полная картина:

И в качестве завершающего штриха последний разделитель:

5. Делаем эффект адаптивным

Последнее, что вам предстоит сделать — это учесть различные разрешения экрана. Когда окно просмотра (viewport) становится слишком маленьким, чтобы нормально отображать наши фоновые изображения, нам желательно сделать их строчными элементами.

В верхней части каждого из контейнеров, после открывающего тега div, перед текстом, добавьте элемент figure с классом .smallscreen, и внутрь добавьте тэг img, чтобы загрузить изображения, которые в настоящее время используются в качестве фоновых:

Первый контейнер:

Второй контейнер:

Третий контейнер:

Четвертый контейнер:

Мы будем использовать класс .smallscreen, чтобы изначально скрыть строчное изображение, но показывать его, когда разрешение экрана будет небольшим. Добавьте в вашу таблицу стилей следующий класс:

Сейчас мы добавим медиа запросы (media queries), которые позволят определить, какое изображение использовать — фоновое или строчное. Они также позволят постепенно уменьшать размер текста и свободное пространство на макете, чтобы хорошо расположить все элементы, в зависимости от ширины окна просмотра. Добавьте в вашу таблицу стилей следующие медиа запросы:

Первые четыре медиа запроса просто постепенно уменьшают размер шрифта и отступы внутри контейнеров с контентом, чтобы они помещались в доступной ширине экрана.

В пятом медиа запросе мы добавляем max-width: 50rem, который делает класс .smallscreen видимым и убирает отступ равный 50% у контейнеров с контентом, и скрывает все фоновые изображения. Когда медиа запрос срабатывает, мы больше не видим больших зафиксированных изображений. Вместо этого мы видим обычные изображения в верхней части каждого контейнера.

Теперь когда вы обновите ваш сайт, вы должны увидеть нужный результат, плавно масштабируя окно браузера, пока не дойдете до наименьшего размера:

Заключение

Даже после стольких лет работы с CSS я не перестаю удивляться постоянно растущему количеству потрясающих вещей, которые вы можете с ним проделывать. И чем проще техника, тем большее впечатление она производит. Испытайте эту небольшую изумительную технику. Она такая простая и быстрая в реализации, что она вам сразу же понравится и вы будете ее использовать!

Автор: Kezz Bracey

Источник: //webdesign.tutsplus.com/

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

Метки: , ,

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

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

Комментарии (2)