При создании современного веб-сайта одной из самых популярных техник дизайна является параллакс эффект; Он позволяет создать глубину и движение на странице‚ делая визуальный опыт пользователя более привлекательным и интерактивным.
Параллакс эффект ౼ это техника‚ при которой фоновое изображение движется с разной скоростью‚ чем остальной контент на странице‚ при прокрутке. Это создает иллюзию глубины‚ добавляет динамичность и живость в дизайн.
Создание параллакса на веб-сайте может быть достигнуто с помощью CSS и JavaScript. Давайте рассмотрим один из подходов к созданию параллакса с использованием JavaScript.
Шаг 2⁚ Определите стили CSS
CSS
.parallax-section {
position⁚ relative;
width⁚ 100%;
height⁚ 100vh;
overflow⁚ hidden;
}
.parallax-layer {
position⁚ absolute;
top⁚ 0;
left⁚ 0;
width⁚ 100%;
height⁚ 100%;
background-size⁚ cover;
background-position⁚ center;
}
.layer-1 {
background-image⁚ url(‘layer-1.jpg’);
z-index⁚ 5;
animation⁚ layer1 20s linear infinite;
}
.layer-2 {
background-image⁚ url(‘layer-2.jpg’);
z-index⁚ 4;
animation⁚ layer2 25s linear infinite;
}
.layer-3 {
background-image⁚ url(‘layer-3.jpg’);
z-index⁚ 3;
animation⁚ layer3 30s linear infinite;
}
.layer-4 {
background-image⁚ url(‘layer-4.jpg’);
z-index⁚ 2;
animation⁚ layer4 35s linear infinite;
}
.layer-5 {
background-image⁚ url(‘layer-5.jpg’);
z-index⁚ 1;
animation⁚ layer5 40s linear infinite;
}
@keyframes layer1 {
0% {
transform⁚ translateX(0);
}
100% {
transform⁚ translateX(-100%);
}
}
/* Анимация для остальных слоев аналогична */
Шаг 3⁚ Добавьте JavaScript код
JavaScript
window.addEventListener(‘scroll’‚ function {
var parallaxSections document.querySelectorAll(‘.parallax-section’);
for (var i 0; i < parallaxSections.length; i ) { var parallaxSection parallaxSections[i]; var layers parallaxSection.querySelectorAll(';parallax-layer'); for (var j 0; j < layers.length; j ) { var layer layers[j]; var scrollSpeed layer.getAttribute('data-scroll-speed'); var distance -(window.pageYOffset * scrollSpeed); var translate 'translate3d(0‚ ' distance 'px‚ 0)'; layer.style.transform translate; } } }); Теперь у вас есть готовый код для создания параллакс эффекта на вашем веб-сайте. Важно помнить‚ что для достижения наилучшего результата необходимо настроить скорость прокрутки для каждого слоя фонового изображения. Используете параллакс секции на вашем веб-сайте‚ и вы увидите‚ как он придает вашему дизайну новую жизнь и эффектность‚ делая его более привлекательным для пользователей.