Перенеси анимацию объектов в JS
Привет участникам форума. Есть объекты в HTML
<div class="overlay">
<button type="button" disabled>
Загрузка...
</button>
</div>
<div class="container">
<div class="image-stack">
<img class="blink-image rybak" src="pictures/Рыбак.gif" alt="карась" />
<img class="blink-image polKarasya" src="pictures/ПолКарася.gif" alt="полкарася" />
<img class="blink-image dozavra" src="pictures/ПриходЗавтра.png" alt="До завтра" />
<div class="blink-image butylka_conteainer">
<img class="butylka" src="pictures/Бутылка.png" alt=""/>
<img class="stakan_l" src="pictures/Стакан.png" alt=""/>
<img class="stakan_p" src="pictures/Стакан.png" alt=""/>
<div class="text_nadpis">
<svg
Далее описание SVG
И есть вот такой скрипт
const MP3_URL = 'music/1.mp3';
document.addEventListener('DOMContentLoaded', () => {
// Для печати стихотворения const printText добавлено для задержки выполнения function search_textNodes(b)
const printText = () => {
var textNodes = [];
var textNodes_data = [];
var i = 0;
function search_textNodes(b) {
b = b.childNodes;
for (var c = 0, d = b.length; c < d; c++) {
var a = b[c];
if (a.nodeType == 3) {
textNodes.push(a);
textNodes_data.push(a.data);
a.data = ""
} else a.hasChildNodes() && search_textNodes(a)
}
};
var d = document.getElementById('test');
search_textNodes(d);
(function() {
var a = textNodes_data[i];
if (a) {
textNodes[i].data += a.charAt(0);
textNodes_data[i] = a.substr(1)
} else i++;
i < textNodes.length && setTimeout(arguments.callee, 160)
})();
}
// Загрузка аудио, начало работы и на нопку ставим картинку
const audio = new Audio();
const play = () => {
audio.play().catch(e => {
alert(e.message);
});
};
audio.addEventListener('canplaythrough', () => {
const button = document.querySelector('.overlay button');
if (!button) return;
const btn = document.createElement('input');
btn.type = 'image';
btn.src = 'pictures/Авто.png';
btn.width = '900';
button.after(btn);
button.remove();
btn.addEventListener('click', () => {
document.querySelector('.overlay')?.remove();
audio.muted = false;
audio.loop = false; // отключаем зпцикливание музыки
audio.volume = 1; // 0..1
play();
printText();
}, {
once: true
});
});
audio.addEventListener('error', () => {
alert(audio.error?.message ?? 'Something went wrong');
});
audio.src = MP3_URL;
});
const frazas = [
{src: "pictures/Fraza_L.png",
imgpos: [180, 516],
text: "Час стоим<br> клёва нет.",
textpos: [208, 545]
},
{src: "pictures/Fraza_P.png",
imgpos: [172, 739],
text: "Непруха <br> сегодня. ",
textpos: [200, 770]
},
{src: "pictures/Fraza_P.png",
imgpos: [165, 871],
text: "С клёвом <br> тишина.",
textpos: [195, 895]
},
{src: "pictures/Fraza_L.png",
imgpos: [180, 516],
text: "Вот и Андрюха<br> на горизонте!",
textpos: [205, 528]
},
{src: "pictures/Fraza_P.png",
imgpos: [172, 739],
text: "Андрюха, <br> клёва нет!",
textpos: [197, 768]
},
{src: "pictures/Fraza_P.png",
imgpos: [165, 871],
text: "Клевать <br> не будет!",
textpos: [195, 899]
},
{src: "pictures/Fraza_L.png",
imgpos: [180, 519],
text: "У Андрюхи<br> жор начался!",
textpos: [205, 538]
},
{src: "pictures/Fraza_P.png",
imgpos: [172, 739],
text: "Во попёрло!!!",
textpos: [208, 755]
},
{src: "pictures/Fraza_P.png",
imgpos: [165, 871],
text: "Нам бы так!",
textpos: [203, 889]
},
{src: "pictures/Fraza_L.png",
imgpos: [180, 516],
text: "Сойди!!! <br> Сойди!!!",
textpos: [209, 546]
},
{src: "pictures/Fraza_P.png",
imgpos: [172, 739],
text: "У него <br> не сойдёт.",
textpos: [200, 763]
},
{src: "pictures/Fraza_P.png",
imgpos: [165, 871],
text: "Чем кормил?",
textpos: [203, 889]
},
{src: "pictures/Fraza_L.png",
imgpos: [180, 516],
text: "На что ловишь?",
textpos: [216, 528]
},
{src: "pictures/Fraza_P.png",
imgpos: [172, 739],
text: "Продай секрет.",
textpos: [208, 755]
},
{src: "pictures/Fraza_P.png",
imgpos: [165, 871],
text: "Ставлю литр!!!",
textpos: [202, 883]
},
{src: "pictures/Fraza_L.png",
imgpos: [180, 516],
text: "Рука не устала?",
textpos: [215, 526]
},
{src: "pictures/Fraza_P.png",
imgpos: [172, 739],
text: "Оставь <br> на завтра.",
textpos: [203, 762]
},
{src: "pictures/Fraza_P.png",
imgpos: [165, 871],
text: "Завтра ведро <br> побольше.",
textpos: [195, 889]
},
];
const fishImages = [
{src: "pictures/Karas_L.gif", pos: [310, 600], scale: 0.6},
{src: "pictures/Karas_P.gif", pos: [345, 750], scale: 0.8},
{src: "pictures/Karas_L.gif", pos: [350, 500], scale: 1},
{src: "pictures/Karas_P.gif", pos: [345, 670], scale: 0.6},
];
const fishImages_1 = [
{src: "pictures/Karas_L.gif", pos: [310, 600], scale: 0.6},
{src: "pictures/Karas_P.gif", pos: [345, 750], scale: 0.8},
{src: "pictures/Karas_L.gif", pos: [350, 500], scale: 1},
{src: "pictures/Karas_P.gif", pos: [310, 600], scale: 0.6},
{src: "pictures/Karas_L.gif", pos: [345, 750], scale: 0.8},
{src: "pictures/Karas_P.gif", pos: [350, 500], scale: 1},
{src: "pictures/Karas_L.gif", pos: [345, 670], scale: 1},
{src: "pictures/Karas_P.gif", pos: [310, 600], scale: 0.8},
{src: "pictures/Karas_L.gif", pos: [350, 500], scale: 1},
{src: "pictures/Karas_P.gif", pos: [345, 670], scale: 0.8},
{src: "pictures/Karas_L.gif", pos: [310, 600], scale: 0.6},
{src: "pictures/Karas_P.gif", pos: [350, 500], scale: 1},
{src: "pictures/Karas_L.gif", pos: [350, 600], scale: 0.8},
];
const img = document.querySelector('.fraza img');
const txt = document.querySelector('.fraza b');
const delay = (t) => new Promise (r => setTimeout(r, t))
async function cycle () {
await delay(4500);
for (let f of fishImages) {
img.src = f.src;
img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
img.style.setProperty("--scale", f.scale)
await delay(4500);
}
img.style = 'opacity: 0;'
await delay(6500);
for (let f of frazas) {
img.src = f.src;
img.style = `top: ${f.imgpos[0]}px; left: ${f.imgpos[1]}px; opacity: 1;`
txt.innerHTML = f.text
txt.style = `top: ${f.textpos[0]}px; left: ${f.textpos[1]}px; opacity: 1;`
await delay(3000);
img.style = `top: ${f.imgpos[0]}px; left: ${f.imgpos[1]}px; opacity: 0;`
txt.innerHTML = f.text
txt.style = `top: ${f.textpos[0]}px; left: ${f.textpos[1]}px; opacity: 0;`
await delay(1500);
}
txt.textContent = '';
img.style.display = 'none';
img.style = 'opacity: 0;'
await delay(4500);
for (let f of fishImages_1) {
img.src = f.src;
img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
img.style.setProperty("--scale", f.scale)
await delay(4500);
}
}
Надо анимацию этих объектов перенести в JS. Объекты должны с определенной задержкой плавно появиться на экране в определённых местах и также плавно исчезнуть с экрана через определённое время. Кое -какие данные для подобной анимации у меня есть
const arr = [{show : 45000, hide : 179200}, {show : 182000, hide : 190000}, {show : 183000, hide : 186000},{show : 187000, hide : 198000}];
document.querySelectorAll('.blink-image').forEach((image, index) => {
let {show, hide} = arr[index];
setTimeout(() => image.classList.add('open'), show);
setTimeout(() => image.classList.remove('open'), hide);
});
Это реальные временные показатели для появление и исчезновения объектов. Самостоятельно этот вопрос я решить не смогу. Надеюсь на помощь знатоков JS. Всем сасибо. Жду предложения по решению проблемы. |
Надо было сделать так ,чтобы картинки появлялись с определенной задержкой, в определенное время и могли бы работать. так скажем с перекрытием, т.е. вот так как тут https://codepen.io/bsi_52/pen/rNbdeVE, первым появляется рыбак, затем рыбки, анимация рыбака продолжается вместе с анимацией рыбок, затем анимация рыбок прекращается, а анимация рыбака какое-то время продолжается. Надо только добавить плавное скрытие рыбака. Если есть другие варианты реализации подобной анимации, буду рад их изучить.
|
| Часовой пояс GMT +3, время: 23:17. |