61 lines
2.3 KiB
JavaScript
61 lines
2.3 KiB
JavaScript
// Массив фоновых изображений (те же, что были)
|
||
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);
|
||
} |