Поиск по сайту:

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

Введение

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

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

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

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

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

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

Введите следующую команду, чтобы создать папку проекта:

  1. mkdir css-parallax

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

  1. cd css-parallax

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

  1. 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>:

[label 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:

  1. nano styles.css

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

Затем начните с класса .wrapper. В файл styles.css добавьте следующий код:

[label css-parallax/styles.css] 
.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 2px;
}

Класс .wrapper задает свойства перспективы и прокрутки для всей страницы.

Высота оболочки должна быть установлена на фиксированное значение, чтобы эффект работал. Вы можете использовать единицу измерения области просмотра vh, установленную на 100, чтобы получить полную высоту области просмотра экрана.

Когда вы масштабируете изображения, они добавят на экран горизонтальную полосу прокрутки, поэтому вы можете отключить ее, добавив overflow-x: hidden;. Свойство perspective имитирует расстояние от окна просмотра до псевдоэлементов, которые вы создадите и преобразуете ниже в CSS.

На следующем шаге вы добавите больше CSS для оформления вашей веб-страницы.

Шаг 4 — Добавление стилей для класса .section

На этом шаге вы добавите стили в класс .section.

В файле 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 используются для форматирования и добавления стиля к тексту внутри каждого раздела. Он размещает текст в центре каждого раздела и добавляет белый цвет.

Затем вы добавите псевдоэлемент и стилизуете его, чтобы создать эффект параллакса в двух разделах вашего 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-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 и открытие 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 в браузере:

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

Заключение

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

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