Advertisement
  1. Web Design
  2. Parallax Scrolling

Создайте Эффект Маски с Фоном в CSS

by
Read Time:20 minsLanguages:

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

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

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

Вот как это делается.

Это Все в CSS

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

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

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

Как Это Делается

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

  1. 1. Создайте элемент-контейнер и добавьте туда контент.
  2. Сделайте для контейнерав (в нашем случае это div), padding c одной стороны 50% width,  таким образом сместив контейнер на одну сторону.
  3. Добавьте фоновый рисунок, также 50% ширины, и позиционируйте его на протовиоположную сторону от контейнера.
  4. Задайте свойство background-attachment: fixed; и наслаждайтесь волшебством при скроллинге!

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

1. Создаем Основу

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

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

Тут мы создаем нашу HTML основу, подключаем файл со стилями и некоторые шрифты Google, затем создаем наш первый div-контейнер, который мы используем в нашей технике.

div-контейнер содержит в себе три класса:

  1. .content - используете для некоторых свойств, которые будут общими для всего контейнера.
  2. .right - показывает что этот контейнер, будет выравниваться по правой части (у нас так же будет контейнер с левой стороны).
  3. .illustration_01 - используется, чтобы показать использование определенной иллюстрации и цвета для этого контейнера.

Стли

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

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

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

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

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

Далее, мы задаем background-repeat: no-repeat; чтобы наша картинка отображалась на странице только один раз.

Далее добавим описание стилей для класса .right:

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

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

И наконец добавим класс .illustration_01:

С помощью него зададим определенное фоновое изображение, и цвет для контейнера.

Проверьте как работает ваш сайт, теперь он должен выглядеть так:

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

2. Добавляем Второй Контейнер

Теперь давайте добавим второй контейнер для текста, этот будет выравниваться по левой стороне.

Добавьте этот контейнер  в HTML под последними div:

Заметьте что на этот раз мы используем класс  .left заместо .rightand,  и мы увеличиваем номер для иллюстрации, поэтому класс  .illustration_01 заменен классом .illustration_02.

И добавьте свойства для этих двух классов в таблицу стилей:

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

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

3. Вставляем Разделитель

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

Между двумя вашими div-контейнерам добавьте следующую разметку в HTML:

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

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

4. Третий и Четвертый Контейнеры

Теперь вы можете добавить код для оставшихся разделителей и контейнеров с текстом.

Добавьте следующую разметку ниже ваших div:

И добавьте  в ваш CSS файл следующее:

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

Как и последний сепаратор:

5. Делаем все Адаптивным

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

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

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

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

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

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

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

Добавьте стиль для класса в таблицу стилей:

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

Добавьте это медиазапрос в таблицу стилей:

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

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

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

Заключение

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

Попробуйте этот маленький приемчик, он такой просто и быстры, и вероятно он вас зацепит!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.