add background js

frontend/js/background.js

+document.addEventListener('DOMContentLoaded', () => {
+    let hasScrolled = false; // Флаг для отслеживания первого скролла
+    let lastScrollY = window.scrollY; // Хранит последнее значение прокрутки
+
+    window.addEventListener('scroll', function() {
+        const scrollY = window.scrollY; // Получаем текущую позицию прокрутки
+
+        // Проверяем, был ли скролл вниз и еще не произошло изменение opacity
+        if (scrollY > lastScrollY && !hasScrolled) {
+            hasScrolled = true; // Устанавливаем флаг
+            document.querySelector('.wrapper').classList.add('inactive'); // Меняем opacity
+        }
+        // Проверяем, вернулась ли прокрутка к верхней позиции (scrollY === 0)
+        else if (scrollY === 0) {
+            hasScrolled = false; // Сбрасываем флаг
+            document.querySelector('.wrapper').classList.remove('inactive'); // Возвращаем первоначальное значение
+        }
+
+        // Обновляем последнее значение прокрутки
+        lastScrollY = scrollY; 
+    });
+});

frontend/main.js

@@ -21,6 +21,7 @@ import './styles/admin.css'
 import './js/burger.js'
 import './js/speech.js'
 import './js/scrollup.js'
+import './js/background.js'
 //import './js/search.js'
 //import './js/toc.js'
 

frontend/styles/main.css

@@ -184,6 +184,25 @@ a:hover {
 }
 
 
+.wrapper::after {
+    content: '';
+    background-image: url('/lib/tpl/ak/pub/img/church-300.png'); /* Путь к изображению */
+    background-repeat: no-repeat;
+    position: fixed;
+    bottom: 0;
+    right: 0; /* Позиция от правой части */
+    width: 300px; /* Ширина изображения */
+    height: 300px; /* Высота изображения */
+    z-index: -1; /* Чтобы изображение было под содержимым */
+    opacity: 0.4; /* Начальное значение */
+    transition: opacity 0.2s ease; /* Плавный переход */
+}
+
+.wrapper.inactive::after{
+    opacity: 0.2;
+}
+
+
 /* Футер */
 footer {
     background-color: #333;