Параллакс эффект веб-сайта можно создать с использованием HTML, CSS и JavaScript. Вот пример кода для создания простого параллакс-эффекта:
1.HTML:
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link rel=»stylesheet» href=»styles.css»>
<title>Параллакс сайт</title>
</head>
<body>
<div class=»parallax»>
<div class=»parallax-content»>
<h1>Добро пожаловать на мой сайт</h1>
<p>Это демонстрация параллакс-эффекта</p>
</div>
</div>
<div class=»content»>
<h2>Содержимое сайта</h2>
<p>Здесь находится ваш контент.</p>
</div>
</body>
</html>
2.CSS (файл styles.css):
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.parallax {
background-image: url(‘путь-к-изображению.jpg’);
background-size: cover;
background-attachment: fixed;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.parallax-content {
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}
.content {
padding: 40px;
text-align: center;
}
h1, h2 {
font-size: 36px;
}
p {
font-size: 18px;
}
3. JavaScript (для простоты этот код можно вставить непосредственно в тег <script> в HTML):
<script>
window.addEventListener(‘scroll’, function() {
let scrollTop = window.scrollY;
let parallax = document.querySelector(‘.parallax’);
parallax.style.backgroundPositionY = -scrollTop * 0.5 + ‘px’;
});
</script>
Этот код создает эффект параллакса, перемещая фоновое изображение при прокрутке страницы. Вы можете заменить
'путь-к-изображению.jpg'на путь к вашему собственному изображению фона. (Так же кавычки в в рабочем коде заменяете открывающие на открывающие и закрывающие на закрывающие соответсвенно!).