Введение
Код CSS — это мощный инструмент, который вы можете использовать для создания многих продвинутых функций пользовательского интерфейса. В прошлом эти функции использовали библиотеки JavaScript.
В этом учебном модуле вы настроите несколько строк кода CSS для создания эффекта многоуровневого скроллинга на веб-странице. В качестве замещающих фоновых изображений мы будем использовать изображения с сайта placekitten.com
.
После завершения учебного модуля мы получим веб-страницу с кодом CSS, реализующим эффект многоуровневого скроллинга.
Предупреждение. В этой статье описываются экспериментальные свойства CSS, доступные не во всех браузерах. Этот проект протестирован в браузере Chrome и работает в нем. Данная методика не очень хорошо работает в браузерах Firefox, Safari и iOS в связи с некоторыми оптимизациями этих браузеров.
Шаг 1 — Создание нового проекта
На этом шаге мы используем командную строку для создания и настройки папки и файлов нового проекта. Для начала откройте терминал и создайте новую папку проекта.
Введите следующую команду для создания папки проекта:
В данном случае мы присвоили папке имя css-parallax
. Перейдите в папку css-parallax
:
Затем создайте файл index.html
в папке css-parallax
с помощью команды nano
:
В этот файл мы поместим весь код HTML для данного проекта.
На следующем шаге мы начнем создавать структуру веб-страницы.
Шаг 2 — Настройка структуры приложения
На этом шаге мы добавим код HTML, необходимый для создания структуры проекта.
Добавьте в файл index.html
следующий код:
css-parallax/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>
:
css-parallax/index.html
<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
.
Шаг 3 — Создание файла CSS и добавление начального кода CSS
На этом шаге мы создадим файл CSS
. Затем мы добавим начальный код CSS, необходимый для построения стилей сайта и создания эффекта многоуровневого скроллинга.
Для начала создайте файл styles.css
в папке css-parallax
с помощью команды nano
:
В этом файле мы разместим весь код CSS, необходимый для создания эффекта многоуровневого скроллинга.
Затем начнем работать с классом .wrapper
. Добавьте в файл styles.css
следующий код:
css-parallax/styles.css
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
Класс .wrapper
устанавливает свойства перспективы и скроллинга для всей страницы целиком.
Чтобы эффект работал, необходимо задать фиксированное значение высоты элемента wrapper. Вы можете использовать для единицы окна экрана vh
значение 100
, чтобы получить полную высоту окна экрана.
При масштабировании изображений они добавляют на экран горизонтальную панель прокрутки, которую вы можете отключить, добавив выражение overflow-x: hidden;
. Свойство perspective
моделирует расстояние от окна экрана до псевдоэлементов, которые мы будем создавать и трансформировать в коде CSS
.
На следующем шаге мы добавим дополнительный код CSS для настройки стиля веб-страницы.
Шаг 4 — Добавление стилей для класса .section
На этом шаге мы добавим стили в класс .section
.
В файле styles.css
необходимо добавить следующий код под классом wrapper:
css-parallax/styles.css
.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
.
Каждый раздел имеет параметр view-height(vh)
со значением 100
, чтобы занимать полную высоту окна просмотра. Это значение можно изменить и установить любую высоту, предпочитаемую для каждого раздела.
Наконец, остальные свойства CSS
используются для форматирования и добавления стилей в текст внутри каждого раздела. Код размещает текст в центре каждого раздела и добавляет цвет white
.
Затем мы добавим псевдоэлемент и установим для него стиль для создания эффекта многоуровневой прокрутки в двух разделах вашего кода HTML
.
Шаг 5 — Добавление стилей для класса .parallax
На этом шаге мы добавим стили в класс .parallax
.
Вначале мы добавим псевдоэлемент в класс .parallax
, к которому применяется стиль.
Примечание. Дополнительную информацию о псевдоэлементах CSS можно найти в веб-документах MDN.
Добавьте следующий код под классом .section
:
css-parallax/styles.css
...
.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
, а затем масштабирует его для заполнения окна просмотра целиком.
Поскольку псевдоэлемент располагается далеко, он выглядит так, как если бы он двигался медленнее.
На следующем шаге мы добавим фоновые изображения и статичный фоновый стиль.
Шаг 6 — Добавление изображений и фона для каждого раздела
На этом шаге мы добавим заключительные свойства CSS
для добавления фоновых изображений и фонового цвета статичного раздела.
Вначале мы добавим сплошной фоновый цвет в раздел .static
, вставив следующий код после класса .parallax::after
:
css-parallax/styles.css
...
.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
, чтобы добавить фоновые изображения Kitten.
Добавим следующий код в класс .static
:
css-parallax/styles.css
...
.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
и открытия index.html
в вашем браузере
На этом шаге мы привяжем файл styles.css
и откроем проект в браузере, чтобы увидеть эффект многоуровневой прокрутки.
Вначале добавим следующий код в тег <head>
в файле index.html
:
css-parallax/index.html
...
<head>
<meta charset="UTF-8" />
<^>
<link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/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
.