d

public/hero-slideshow.js

@@ -0,0 +1,61 @@
+// Массив фоновых изображений (те же, что были)
+const heroImages = [
+    'img/h777.webp',
+    'img/h777o.webp',
+    'img/h777l.webp',
+    'img/h777z.webp'
+];
+
+// Возможные эффекты анимации (классы CSS)
+const effects = ['effect-shutter', 'effect-tornado', 'effect-wave'];
+
+// Текущий индекс изображения
+let currentIndex = 0;
+let intervalId = null;
+
+// Получаем элемент hero
+const hero = document.querySelector('.hero');
+
+// Функция для применения случайного эффекта и смены фона
+function changeBackgroundWithEffect() {
+    if (!hero) return;
+
+    // Выбираем случайный эффект
+    const randomEffect = effects[Math.floor(Math.random() * effects.length)];
+    
+    // Добавляем класс эффекта
+    hero.classList.add('effect-active', randomEffect);
+    
+    // Через небольшую задержку меняем фон (чтобы анимация началась)
+    // Но для плавности меняем изображение сразу, а эффект создаёт иллюзию перехода
+    currentIndex = (currentIndex + 1) % heroImages.length;
+    const newImageUrl = heroImages[currentIndex];
+    
+    // Меняем фон
+    hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${newImageUrl}')`;
+    
+    // Через время, равное длительности анимации, убираем класс эффекта
+    setTimeout(() => {
+        hero.classList.remove('effect-active', randomEffect);
+    }, 800); // длительность анимации 0.8с
+}
+
+// Запуск слайдшоу
+function startSlideshow(intervalMs = 15000) {
+    if (intervalId) clearInterval(intervalId);
+    intervalId = setInterval(changeBackgroundWithEffect, intervalMs);
+}
+
+// Остановка слайдшоу (опционально)
+function stopSlideshow() {
+    if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+    }
+}
+
+// Инициализация: устанавливаем первый фон сразу
+if (hero) {
+    hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${heroImages[0]}')`;
+    startSlideshow(15000);
+}

public/index.html

@@ -138,5 +138,6 @@
     <script src="scripts.js"></script>
     <script src="about.js"></script>
     <script src="location.js"></script>
+    <script src="hero-slideshow.js"></script>
 </body>
 </html>

public/style.css

@@ -498,4 +498,63 @@ footer {
     border-radius: 20px;
     border-left: 4px solid var(--secondary);
     font-size: 1rem;
+}
+/* Эффекты перехода для hero */
+.hero {
+    position: relative;
+    overflow: hidden;
+    transition: background-image 0.2s ease; /* плавная смена самого фона (не обязательно) */
+}
+
+/* Базовые стили для псевдоэлемента анимации */
+.hero.effect-active::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+    background: rgba(0,0,0,0.2);
+    animation-duration: 0.8s;
+    animation-fill-mode: forwards;
+}
+
+/* 1. Шторка - полоса, проходящая по экрану */
+.hero.effect-shutter::before {
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+    animation-name: shutterSlide;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes shutterSlide {
+    0% { transform: translateX(-100%); width: 10%; }
+    50% { transform: translateX(0%); width: 100%; }
+    100% { transform: translateX(100%); width: 10%; }
+}
+
+/* 2. Торнадо - завихрение (масштаб+поворот) */
+.hero.effect-tornado::before {
+    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 80%);
+    animation-name: tornadoSpin;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes tornadoSpin {
+    0% { transform: scale(0.1) rotate(0deg); opacity: 0; }
+    50% { transform: scale(1.5) rotate(180deg); opacity: 0.8; }
+    100% { transform: scale(0.1) rotate(360deg); opacity: 0; }
+}
+
+/* 3. Волна - ripple effect */
+.hero.effect-wave::before {
+    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
+    animation-name: waveRipple;
+    animation-timing-function: ease-out;
+}
+
+@keyframes waveRipple {
+    0% { transform: scale(0); opacity: 1; }
+    100% { transform: scale(4); opacity: 0; }
 }