Tutorial

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

Published on December 2, 2020

Joshua Bemenderfer

Русский

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

Введение

Код CSS — это мощный инструмент, который вы можете использовать для создания многих продвинутых функций пользовательского интерфейса. В прошлом эти функции использовали библиотеки JavaScript.

В этом учебном модуле вы настроите несколько строк кода CSS для создания эффекта многоуровневого скроллинга на веб-странице. В качестве замещающих фоновых изображений мы будем использовать изображения с сайта placekitten.com.

После завершения учебного модуля мы получим веб-страницу с кодом CSS, реализующим эффект многоуровневого скроллинга.

Предупреждение. В этой статье описываются экспериментальные свойства CSS, доступные не во всех браузерах. Этот проект протестирован в браузере Chrome и работает в нем. Данная методика не очень хорошо работает в браузерах Firefox, Safari и iOS в связи с некоторыми оптимизациями этих браузеров.

Шаг 1 — Создание нового проекта

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

Введите следующую команду для создания папки проекта:

mkdir css-parallax

В данном случае мы присвоили папке имя css-parallax. Перейдите в папку css-parallax:

cd css-parallax

Затем создайте файл index.html в папке css-parallax с помощью команды nano:

nano index.html

В этот файл мы поместим весь код 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:

nano styles.css

В этом файле мы разместим весь код 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:

[label 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 в браузере:

Многоуровневая прокрутка — gif

Итак, мы настроили работающую веб-страницу с эффектом прокрутки. Полный код можно посмотреть в этом репозитории на GitHub.

Заключение

В этой статье мы описали настройку проекта с файлами index.html и styles.css и создание функциональной веб-страницы. Мы добавили структуру веб-страницы и создали стили для различных разделов сайта.

Существует возможность отдаления используемых изображений или эффекта многоуровневой прокрутки так, что они будут двигаться медленнее. Вам нужно будет изменить значения в пикселях для свойств perspective и transform. Если вы не хотите прокручивать фоновое изображение, используйте background-attachment: fixed; вместо perspective/translate/scale.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors