Эффект параллакс-скроллинга с помощью чистого CSS
Development | Комментировать запись
Современный CSS – это очень мощный инструмент, с помощью которого можно создать множество расширенных функций пользовательского интерфейса (UI). Раньше эти функции работали на основе библиотек JavaScript.
В этом руководстве мы расскажем, как использовать CSS для создания эффекта параллакс-скроллинга (параллаксной прокрутки) на странице. Для примера мы будем использовать изображения с сайта placekitten.com. В результате у вас будет веб-страница с эффектом параллакс-скроллинга, написанная на чистом CSS.
Важно! В этой статье рассматриваются экспериментальные свойства CSS, которые, возможно, поддерживаются не всеми браузерами. Этот мануал протестирован в Chrome. Описанный здесь метод не работает в Firefox, Safari и iOS из-за некоторых аспектов оптимизации этих браузеров.
1: Создание нового проекта
Для начала мы будем использовать командную строку, чтобы подготовить папку и файлы для нового проекта. Откройте терминал и создайте новую папку.
Введите следующую команду:
mkdir css-parallax
В данном случае мы назвали папку css-parallax. Теперь перейдите в нее:
cd css-parallax
Создайте в папке css-parallax файл index.html; это можно сделать с помощью команды nano:
nano index.html
Весь HTML-код проекта будет храниться в этом файле.
На следующем этапе мы начнем создавать структуру веб-страницы.
2: Структура приложения
На этом этапе мы напишем HTML-код, необходимый для создания структуры проекта.
В файл index.html добавьте следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Scrolling Parallax</title>
</head>
<body></body>
</html>
Это базовая структура большинства веб-страниц, написанных на HTML.
После этого вставьте в тег <body> следующий код:
<body>
...
<main>
<section class="section parallax bg1">
<h1>Cute Kitten</h1>
</section>
<section class="section static">
<h1>Boring</h1>
</section>
<section class="section parallax bg2">
<h1>Fluffy Kitten</h1>
</section>
</main>
...
</body>
Этот код создает три раздела: у двух из них будет фоновое изображение, а у одного – простой статичный фон.
В этом коде HTML мы прописали CSS-классы, но пока что таких классов нет. Далее мы напишем эти классы, чтобы внедрить необходимые нам стили.
3: Создание стилей CSS
Сейчас нам нужно создать файл CSS, а затем добавить туда исходный CSS, необходимый для стилизации веб-сайта и создания эффекта параллакса.
Сначала создайте в папке css-parallax файл styles.css с помощью nano:
nano styles.css
Здесь мы и разместим весь код CSS, необходимый для создания эффекта параллаксной прокрутки.
Мы начнем с класса .wrapper. В файл styles.css добавьте следующий код:
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
Класс .wrapper определяет свойства перспективы и прокрутки, которые применяются ко всей странице.
Чтобы создать нужный нам эффект параллакс-скроллинга, необходимо установить фиксированное значение высоты оболочки. Для этого можно использовать единицу view-height (vh); установите значение 100vh для свойства height, чтобы захватить всю высоту области просмотра экрана.
При масштабировании изображений на экран будет добавлена горизонтальная полоса прокрутки; вы можете заранее отключить ее, добавив строку overflow-x: hidden;. Свойство perspective имитирует расстояние от области просмотра до псевдоэлементов, которые мы создадим и преобразуем далее в нашем файле CSS.
Давайте расширим наш код CSS.
4: Создание класса .section
На этом этапе мы добавим правила стиля в класс .section.
В файл styles.css после класса .wrapper добавьте следующий код:
.wrapper {
height: 100vh;
overflow-x: hidden;
perspective: 2px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
Класс .section определяет свойства текста для основных разделов сайта.
Установите расположение relative, чтобы дочерний элемент .parallax::after мог позиционироваться относительно родительского элемента .section.
Каждый раздел имеет высоту обзора (vh) 100, чтобы охватить всю высоту области просмотра. Это значение можно изменить и установить здесь любую другую высоту.
Остальные свойства CSS используются для форматирования и добавления стиля к тексту внутри каждого раздела. Они помещают текст в центр каждого раздела и присваивают ему белый цвет.
После этого нам нужно создать псевдоэлемент и задать ему стиль, чтобы создать эффект параллакс-скроллинга в двух разделах HTML-страницы.
5: Создание класса .parallax
На этом этапе мы добавим правила стиля в класс .parallax.
Сначала в класс .parallax нужно добавить псевдоэлемент.
Примечание: Посетите веб-документацию MDN, чтобы узнать больше о псевдоэлементах в CSS.
Добавьте следующий код под классом .section:
...
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
...
Класс .parallax добавляет к фоновому изображению псевдоэлемент ::after, что и обеспечивает преобразования, необходимые для создания эффекта параллакс-скроллинга.
Псевдоэлемент – это последний дочерний элемент в элементе с классом .parallax.
Первая половина кода отображает и позиционирует псевдоэлемент на странице. Свойство transform перемещает псевдоэлемент назад по шкале z (z-index), а затем масштабирует его, чтобы заполнить область просмотра.
Поскольку псевдоэлемент находится дальше, кажется, что он медленно движется.
В следующем разделе мы добавим фоновые изображения и статический фон.
6: Добавление изображений и фона каждого раздела
Нам осталось внести последние свойства CSS, чтобы добавить фоновые изображения и цвет фона статического раздела.
Сначала давайте установим сплошной цвет фона в раздел .static; это делается с помощью следующего кода, который нужно вставить после класса .parallax::after:
...
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.static {
background: red;
}
...
Класс .static устанавливает фон статического раздела, не имеющего изображения.
В двух разделах, которые используют класс .parallax, также есть дополнительный класс, индивидуальный для каждого из них. Это классы .bg1 и .bg2, которые позволяют добавить фоновые изображения.
Вставьте следующий код в класс .static:
...
.static {
background: red;
}
.bg1::after {
background-image: url('https://placekitten.com/g/900/700');
}
.bg2::after {
background-image: url('https://placekitten.com/g/800/600');
}
...
Классы .bg1 и .bg2 добавляют соответствующие фоновые изображения для каждого раздела.
Эти изображения взяты с веб-сайта placekitten – это сервис, предоставляющий изображения котят, которые можно использовать в качестве заполнителей.
Теперь, когда весь код для параллаксовой прокрутки готов, вы можете связать свой файл styles.css с index.html.
7: Привязка файла стилей к странице и тестирование
Пора связать свой файл styles.css с основным кодом страницы. После этого мы сможем открыть проект в браузере, чтобы проверить, работает ли параллакс-скроллинг.
Сначала добавьте следующий код в тег <head> файла css-parallax/index.html:
...
<head>
<meta charset="UTF-8" />
<^>
<link rel="stylesheet" href="styles.css" />
<^>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Parallax</title>
</head>
...
Теперь вы можете открыть файл index.html в браузере и убедиться, что все работает.
Поздравляем, вы создали веб-страницу с эффектом параллаксовой прокрутки. Если вам нужен полный код, загляните в этот репозиторий GitHub.
Заключение
В этом мануале с помощью файлов index.html и styles.css вы создали рабочую веб-страницу. Вы также создали различные стили для разделов сайта.
Эффект параллакса можно настроить и по-другому, чтобы изображения двигались еще медленнее. Для этого нужно изменить количество пикселей в свойствах perspective и transform. Если вы хотите, чтобы фоновое изображение вообще не прокручивалось, используйте background-attachment: fixed; вместо perspective/translate/scale.
Читайте также: Подготовка проекта CSS и HTML с помощью Visual Studio Code
Tags: CSS, HTML