Как на CSS сделать эффект параллакса при прокрутке страницы с использованием фонового изображения?

Эффект параллакса — это визуальный приём, при котором фоновое изображение прокручивается медленнее, чем основной контент страницы, создавая иллюзию глубины. На чистом CSS это реализуется с помощью свойства `background-attachment: fixed`.

## Базовая реализация

Самый простой способ создать параллакс-эффект:

css
.parallax-section {
background-image: url(‘your-image.jpg’);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
}

Свойство `background-attachment: fixed` фиксирует фоновое изображение относительно окна браузера (viewport), а не относительно элемента. При прокрутке страницы контент движется, а фон остаётся на месте — это и создаёт эффект параллакса.

## Полноценный пример разметки

html

css
.content-block {
padding: 80px 20px;
background-color: #fff;
text-align: center;
}

.parallax-section {
background-image: url(‘landscape.jpg’);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
}

## Важные нюансы и ограничения

**Мобильные устройства:** `background-attachment: fixed` плохо поддерживается на iOS Safari и некоторых Android-браузерах — там фон отображается как обычный `scroll`. Для мобильных устройств рекомендуется отключать эффект через медиазапрос:

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

**Производительность:** `background-attachment: fixed` вызывает перерисовку при каждом скролле, что может снижать производительность. Для более плавного эффекта используйте JavaScript с `transform: translateY()` и `requestAnimationFrame`.

**Альтернатива через CSS transform:** Можно создать параллакс с помощью CSS-перспективы:

css
.parallax-container {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}

.parallax-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateZ(-1px) scale(2);
}

Этот метод работает через CSS 3D-трансформации и обеспечивает более плавную анимацию, так как браузер использует аппаратное ускорение.

## Советы по оптимизации

— Используйте изображения в формате WebP для ускорения загрузки.
— Добавляйте `will-change: transform` для элементов с параллаксом.
— Тестируйте эффект на реальных устройствах, особенно мобильных.
— Не злоупотребляйте параллаксом — один-два блока на странице достаточно.