Параллакс-скроллинг — это увлекательный эффект, при котором задний фон движется медленнее, чем передний, создавая впечатление глубины. Хотя большинство современных решений использования JavaScript, мы можем добиться этого эффекта и с помощью чистого CSS. Давайте рассмотрим, как это сделать.

Основные концепции

Чтобы создать параллакс-эффект, мы будем использовать свойства CSS, такие как background-attachment, background-position, и transform. Мы создадим страницу с несколькими секциями, где каждый слой будет двигаться по-разному, создавая 3D-эффект.

HTML Структура

Создадим базовую HTML-структуру.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Параллакс с использованием CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax" style="background-image: url('img/background1.jpg');"></div>
<div class="content">
    <h1>Содержание</h1>
    <p>Это участок контента, расположенный на переднем плане.</p>
</div>
<div class="parallax" style="background-image: url('img/background2.jpg');"></div>
<div class="content">
    <h1>Еще один участок</h1>
    <p>Здесь можно добавить больше текста.</p>
</div>
<div class="parallax" style="background-image: url('img/background3.jpg');"></div>
</body>
</html>

CSS Стили

Теперь добавим стили, которые позволят нам создать параллакс-эффект.

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.parallax {
    height: 400px; /* Высота секции с фоном */
    background-attachment: fixed; /* Фон фиксируется при прокрутке */
    background-position: center; /* Центрируем фон */
    background-repeat: no-repeat; /* Не повторяем фон */
    background-size: cover; /* Используем целиком изображение */
}

.content {
    height: 400px; /* Высота секции с контентом */
    background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный фон для контента */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

Объяснение

background-attachment: fixed; — это свойство фиксирует фон изображения, чтобы он не двигался вместе с прокруткой. Вместо этого он остается неподвижным, создавая иллюзию глубины.

background-size: cover; — это свойство заставляет изображение занимать всю доступную область, обрезая его, если это необходимо. Это позволяет поддерживать соотношение сторон изображения.

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

Заключение

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

Предыдущий вопрос

Каким образом организовать и структурировать CSS код в больших проектах?

Следующий вопрос

Что такое CSS-препроцессоры?

Содержание:

Редактировать