Parallax scrolling: реализация простых эффектов с фиксированными фонами

Эффект параллакса: магия глубины на сайте 🌌

Parallax scrolling — это техника, которая создаёт иллюзию глубины, перемещая элементы страницы с разной скоростью. Сегодня разберём самый простой способ её реализации — с фиксированными фонами. Это лёгкий старт в мир динамичных интерфейсов!

Как работает параллакс с фиксированным фоном?

Суть эффекта:

Фоновое изображение остаётся на месте (background-attachment: fixed).
Контент страницы прокручивается поверх него.
Мозг воспринимает это как слои, движущиеся с разной скоростью.

.parallax-section {
  background-image: url("путь/к/изображению.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 100vh; /* Важно! */
}

💡 Совет: Используйте высококачественные изображения с чётким фокусом. Размытые или пёстрые картинки могут испортить эффект.

Практический пример: горный пейзаж 🏔️

Создадим раздел с параллакс-эффектом горного пейзажа:

<section class="mountain-parallax">
  <div class="content">
    <h2>Покоряйте вершины</h2>
    <p>Путешествуйте с нами по самым красивым местам планеты</p>
  </div>
</section>

.mountain-parallax {
  background-image: url("mountains.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.content {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2rem;
  border-radius: 10px;
}

Многослойный параллакс 🌈

Усилим эффект, добавив несколько слоёв с разной скоростью прокрутки:

<div class="parallax-container">
  <div class="layer layer-1"></div>
  <div class="layer layer-2"></div>
  <div class="layer layer-3"></div>
  <div class="content">Приветствуем в нашем мире!</div>
</div>

.parallax-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.layer-1 {
  background-image: url("layer1.png");
  transform: translateZ(0);
}

.layer-2 {
  background-image: url("layer2.png");
  transform: translateZ(-2px);
}

.layer-3 {
  background-image: url("layer3.png");
  transform: translateZ(-5px);
}

.content {
  position: relative;
  z-index: 10;
}

Оптимизация производительности ⚡

Parallax эффекты могут снижать производительность. Вот как это исправить:

1. Всегда указывайте will-change: transform для анимируемых элементов:

.layer {
  will-change: transform;
}

2. Используйте аппаратное ускорение:

.parallax-section {
  transform: translate3d(0,0,0);
}

3. Оптимизируйте изображения:

Сжимайте без потери качества (используйте WebP)
Подбирайте оптимальные размеры

Альтернативы для мобильных устройств 📱

На мобильных устройствах background-attachment: fixed часто не работает правильно. Добавьте медиа-запрос:

@media (max-width: 768px) {
  .parallax-section {
    background-attachment: scroll;
    background-position: top center;
  }
}