CSS предоставляет нам мощные инструменты для создания разнообразных визуальных эффектов без необходимости использовать сложные JavaScript-библиотеки. Одним из таких эффектов, который можно легко реализовать с помощью CSS, является параллакс-эффект. Это эффект, при котором фоновые изображения движутся медленнее, чем содержимое переднего плана при прокрутке страницы, создавая ощущение глубины.
В этой статье мы рассмотрим, как создать параллакс-эффект с использованием чистого CSS, используя всего около 35 строк кода. Это простой, эффективный и кросс-браузерный способ добиться впечатляющего визуального эффекта.
Шаг 1: Подготовка HTML-разметки
Начнем с базовой HTML-структуры, которая включает в себя основной контейнер и несколько секций. Каждая секция будет либо статичной, либо с параллакс-эффектом.
<main class="wrapper">
<section class="parallax bg1">
<h1>Заголовок 1</h1>
</section>
<section class="static">
<h1>Заголовок 2</h1>
</section>
<section class="parallax bg2">
<h1>Заголовок 3</h1>
</section>
</main>
.wrapper — основной контейнер, который задает параметры прокрутки и перспективы для всего документа..parallax — секции с параллакс-эффектом..static — секция, демонстрирующая контрастный статичный контент..bg1 и .bg2 — классы, отвечающие за разные фоновые изображения в секциях с параллакс-эффектом.
Шаг 2: Добавление CSS для эффекта параллакса
Теперь давайте добавим CSS-код, который создаст параллакс-эффект и настроит внешний вид нашей страницы.
:root {
font-family: sans-serif;
}
.wrapper {
height: 100vh; /* Высота контейнера на всю высоту видимой области экрана */
overflow-x: hidden;
overflow-y: auto; /* Вертикальная прокрутка */
perspective: 2px; /* Имитируем глубину пространства для создания эффекта параллакса */
}
section {
position: relative; /* Для позиционирования внутренних элементов */
height: 100vh; /* Секции также занимают всю высоту экрана */
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0 0 5px #000;
color: #fff;
}
.parallax::after {
/* Создание псевдоэлемента для фона */
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: translateZ(-1px) scale(1.5); /* Отдаляем элемент и масштабируем его, создавая эффект медленного движения фона */
background-size: 100%;
z-index: -1; /* Позволяем содержимому перекрывать фон */
}
/* Статичный фон для одной из секций */
.static {
background-color: #555;
}
/* Фоновые изображения для параллакс-секций */
.bg1::after {
background-image: url('https://source.unsplash.com/jFCViYFYcus/1600x900');
background-position: center top;
}
.bg2::after {
background-image: url('https://source.unsplash.com/1Z2niiBPg5A/1600x900');
background-position: center bottom;
}
Разбор CSS-кода
.wrapper: Этот контейнер определяет параметры прокрутки и перспективы, создавая эффект глубины. perspective: 2px симулирует расстояние между экраном и фоновыми элементами, что является основой параллакс-эффекта..parallax::after: Пс::after создается для каждой секции с параллакс-эффектом. Он получает фоновое изображение и масштабируется, чтобы заполнить всю область. translateZ(-1px) отодвигает элемент на задний план, заставляя его двигаться медленнее при прокрутке страницы..bg1::after и .bg2::after: Эти классы назначают разные фоновые изображения для секций с параллакс-эфф
Заключение
С помощью этого простого метода вы можете добавить эффект параллакса на свою страницу без использования сложных скриптов или библиотек. Это решение отлично работает даже в старых браузерах и позволяет создавать современные, динамичные веб-страницы, привлекающие внимание пользователей. Попробуйте добавить этот эффект на свой сайт и удивите посетителей визуальными эффектами, которые оживляют контент.
