Привет, друг!
Этой статьёй, наравне с запуском блога "Юного Верстальщика", я открываю первую рубрику "С сайта по кусочку", которая будет посвящена изучению и разбору разных составляющих веб-сайта, коими наполнен весь интернет.
Вполне возможно эта рубрика будет носить образовательный характер. Я буду искренне рад, если она поможет кому-то (в том числе и мне) понять, как работают те или иные вещи на сайте.
Введение
В этом выпуске мы разберём крутой Parallax-эффект и попробуем реализовать его с помощью средств HTML5 и CSS3 без использования языка JavaScript.
Что же такое Parallax и какой ещё у него эффект? Из теории:
Parallax - это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.
В веб-дизайне Parallax'ом называют эффект, при котором фоновое изображение сайта или отдельного блока при прокручивании страницы движется медленнее, чем элемент переднего плана (например, заголовок).
Лезем в код
Чтобы реализовать простой Parallax-эффект, нам нужно воспользоваться CSS3-свойствами, отвечающими за 3D трансформации, "transform" и "perspective". Манипулируя значениями этих свойств, мы можем управлять трансформацией нужного блока и получать желаемый эффект.
Разметка
Главный заголовок и подзаголовок заключим в тег "header" и сделаем выравнивание по центру экрана с помощью свойств Flexbox. Фон для "header" зададим с помощью псевдоэлемента ":before", абсолютно спозиционировав его.
Обратите внимание, фон нашей шапки вылез вперед. Чтобы его переместить на задний план, воспользуемся свойством "z-index".
Магия 3D
Чтобы активировать 3D-пространство для нашей страницы, зададим тегу "body" 2 свойства:
- "perspective: 1px;"
- "transform-style: preserve-3d;"
Первое свойство добавляет перспективу нашей странице и устанавливает контент "максимально близко" к экрану, а второе свойство говорит нам, что все дочерние элементы тега "body" буду располагаться в 3D-пространстве. Это же свойство применим к тегу "header", чтобы наши элементы шапки также могли трансформироваться.
Теперь необходимо задать ключевое свойство фону шапки "header:before":
- "transform: translateZ(-1px) scale(2);".
translateZ(-1px) - это функция трансформации, которая "отодвигает" фон шапки от экрана внутрь по оси Z. А теперь представьте большой многоэтажный дом и себя, стоящего прямо перед ним. Дом - это фон шапки, а вы - это экран монитора. Пофантазируйте: если вы отойдете от дома на 100 метров назад, то как бы отодвинете его от себя, и дом визуально станет меньше. Изображение фона шапки также станет меньше... Но нам необходимо, чтобы фон был растянут на весь экран. Как это сделать? Эту задачу решает функция scale(2). Она просто возвращает изображению фона первоначальный размер.
Заключение
Чтобы довершить дело до конца и увидеть Parallax-эффект в действии, добавьте после шапки какую-нибудь секцию с текстовым блоком. Задайте этому блоку 100% минимальную высоту, небольшие отступы по периметру и белый фон. Не забудьте активировать ему 3d-пространство свойством "transform-style".
Вуаля!
P.S.: Посмотреть результат и поковыряться в коде можно по ссылке: https://codepen.io/comingsites/pen/vayErW