Чтобы создать скроллинг фона и позиционирование его по центру на веб-странице, вы можете использовать CSS и JavaScript.
Сначала вам нужно создать контейнер для фона. Например, вы можете создать div элемент с id "background-container" внутри body вашей HTML разметки:
<body> <div id="background-container"></div> <!-- Ваш контент --> </body>
Затем определите стиль для фона в CSS. Установите фоновое изображение, размер и свойство background-attachment в значение fixed:
#background-container {
background-image: url("путь_к_вашему_фоновому_изображению");
background-size: cover;
background-attachment: fixed;
}
Теперь давайте реализуем скроллинг фона и центрирование с помощью JavaScript. Создайте новый файл с расширением ".js" и добавьте его в свою HTML разметку перед закрывающимся тегом </body>:
<body> <div id="background-container"></div> <!-- Ваш контент --> <script src="скрипт.js"></script> </body>
В файле скрипта определите функцию, которая будет отвечать за позиционирование фона и обработку скроллинга:
// Ссылка на контейнер с фоном
var backgroundContainer = document.getElementById("background-container");
// Функция для обработки скроллинга
function handleScroll() {
// Рассчитываем позицию фона на основе скроллинга страницы
var yPos = window.pageYOffset / 2;
// Устанавливаем позицию фона в CSS свойстве background-position
backgroundContainer.style.backgroundPosition = "center " + yPos + "px";
}
// Обработчик события прокрутки страницы
window.addEventListener("scroll", handleScroll);
Теперь, при прокрутке страницы, функция handleScroll будет вызываться, и она будет рассчитывать новую позицию фона на основе скроллинга. Затем она устанавливает это значение в CSS свойстве background-position вашего контейнера с фоном.
Таким образом, вы создали скроллинг фона и позиционирование его по центру на вашей веб-странице с использованием JavaScript и CSS.