Создание эффекта параллакса на веб-странице с помощью JavaScript
Параллакс-эффект — популярный прием в веб-дизайне, который создает иллюзию глубины и оживляет страницу при прокрутке. Даже новичок сможет добавить на свой сайт этот эффект, используя готовые примеры кода. Мы разобрали 2 способа реализации на чистом JavaScript: анимированный многослойный фон и динамичные частицы.
Содержание:
Параллакс — это визуальный эффект, при котором элементы веб-страницы перемещаются с разной скоростью во время прокрутки, создавая иллюзию глубины и объема<sup>1</sup>. Этот прием делает интерфейс динамичным и привлекательным.
Погружение в профессию фронтенд-разработчика с акцентом на ИИ
Узнать большеПараллакс для фоновых изображений
Этот метод создает ощущение глубины за счет многослойного фона.
1.1 Подготовка материалов
1. Подготовьте два изображения:
- фоновый слой (задний план), например, изображение космоса или неба.
- Слой переднего плана, например, силуэт гор или деревьев.
2. Убедитесь, что изображения имеют достаточное разрешение и сочетаются визуально.
1.2 Базовая HTML-разметка
Создайте контейнеры для слоев внутри основного блока веб-страницы.
html
<div class=»parallax-container»>
<div class=»parallax-layer background-layer»></div>
<div class=»parallax-layer foreground-layer»></div>
<!— Контент страницы —>
<div class=»content»>Основное содержимое</div>
</div>
1.3 Стилизация слоев (CSS)
Зафиксируйте слои и настройте их наложение.
css
.parallax-container {
position: relative;
height: 100vh; /* Высота на весь экран */
overflow-x: hidden;
overflow-y: auto;
}
.parallax-layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
}
.background-layer {
background-image: url(‘cosmos.jpg’); /* Задний фон */
z-index: 1;
}
.foreground-layer {
background-image: url(‘trees.png’); /* Передний план */
z-index: 2;
filter: blur(1px); /* Легкое размытие для смягчения краев */
}
.content {
position: relative;
z-index: 3; /* Контент поверх слоев */
}
1.4 Анимация с помощью JavaScript
Добавьте скрипт, который перемещает слои с разной скоростью при прокрутке.
javascript
window.addEventListener(‘scroll’, () => {
const scrolled = window.pageYOffset;
const backgroundLayer = document.querySelector(‘.background-layer’);
const foregroundLayer = document.querySelector(‘.foreground-layer’);
// Задний слой движется медленнее (коэффициент < 1)
backgroundLayer.style.transform = `translateY(${scrolled * 0.5}px)`;
// Передний слой движется быстрее (коэффициент можно увеличить)
foregroundLayer.style.transform = `translateY(${scrolled * 0.8}px)`;
});
Как это работает: скорость перемещения слоя зависит от его предполагаемой удаленности от наблюдателя. Чем дальше слой (например, звезды), тем медленнее он должен двигаться. Чем ближе (например, дерево), тем быстрее.
Параллакс-эффект для частиц (Передний план)
Эффект можно применять и к мелким декоративным элементам (частицам), расположенным поверх контента.
2.1 Создание контейнера для частиц
Добавьте в разметку блок, который будет невидим для пользователя, но послужит системой координат для генерации частиц.
html
<div id=»particles-container»></div>
2.2 Генерация частиц через JavaScript
Скрипт создает заданное количество частиц, случайным образом распределяет их и задает параметры движения.
javascript
const container = document.getElementById(‘particles-container’);
const particleCount = 100;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement(‘div’);
particle.classList.add(‘particle’);
// Случайные начальные позиции и размер
particle.style.left = `${Math.random() * 100}vw`;
particle.style.top = `${Math.random() * 100}vh`;
particle.style.width = particle.style.height = `${Math.random() * 10 + 2}px`;
particle.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 60%)`;
particle.style.borderRadius = ‘50%’;
container.appendChild(particle);
// Привязка скорости движения к прокрутке
window.addEventListener(‘scroll’, () => {
const scrolled = window.pageYOffset;
// Каждая частица движется со своей, уникальной скоростью
const speed = 0.5 + Math.random() * 1.5;
particle.style.transform = `translateY(${scrolled * speed * 0.05}px)`;
});
}
2.3 Стили для контейнера частиц
css
#particles-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Частицы не мешают взаимодействию с контентом */
z-index: 10;
}
Рекомендации по оптимизации и улучшению
- Производительность: Для анимации используйте CSS-свойство transform, так как оно обрабатывается графическим процессором (GPU) и не вызывает дорогостоящих перерасчетов макета (reflow).
- Отложенная загрузка (Lazy Load): Для фоновых изображений большого размера используйте атрибут loading=»lazy» или загружайте их после основного контента.
- Адаптивность: Проверяйте работу эффекта на мобильных устройствах. Возможно, на touch-экранах потребуется уменьшить интенсивность эффекта или отключить его.
- Эксперименты: Меняйте параметры — скорость, количество слоев/частиц, форму, размытие (blur), прозрачность (opacity). Оптимальные настройки зависят от конкретного дизайна.
Исходный код примеров, описанных в статье, можно найти на GitHub.
Фронтенд-разработка + искусственный интеллект = максимальная эффективность
В рамках курса вы освоите создание пользовательских интерфейсов для веб-сервисов, используя различные языки программирования и дополнительные инструменты. Вы сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины и другие приложения.
Узнать подробнее
