Делаю анимационную открытку к юбилею друга-рыбака. Проблема в том, что после показа нужных картинок (картинки фраз с вставленным в них текстом), на экране, слева внизу, появляется лишняя картинка, изображающая фразы. Подскажите как исправить данную проблему.
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: [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: "Во попёрло!!!",
textpos: [208, 755]
},
{src: "pictures/Fraza_P.png",
imgpos: [165, 871],
text: "Нам бы так!",
textpos: [206, 889]
},
{src: "pictures/Fraza_L.png",
imgpos: [180, 516],
text: "Сойди!!! <br> Сойди!!!",
textpos: [205, 528]
},
{src: "pictures/Fraza_P.png",
imgpos: [172, 739],
text: "У него <br> не сойдёт.",
textpos: [208, 755]
},
{src: "pictures/Fraza_P.png",
imgpos: [165, 871],
text: "Чем кормил?",
textpos: [206, 889]
},
{src: "pictures/Fraza_L.png",
imgpos: [180, 516],
text: "На что ловишь?",
textpos: [205, 528]
},
{src: "pictures/Fraza_P.png",
imgpos: [172, 739],
text: "Продай секрет.",
textpos: [208, 755]
},
{src: "pictures/Fraza_P.png",
imgpos: [165, 871],
text: "Ставлю литр!!!",
textpos: [206, 889]
},
{src: "pictures/Fraza_L.png",
imgpos: [180, 516],
text: "Рука не устала?",
textpos: [205, 528]
},
{src: "pictures/Fraza_P.png",
imgpos: [172, 739],
text: "Оставь <br> на завтра.",
textpos: [208, 755]
},
{src: "pictures/Fraza_P.png",
imgpos: [165, 871],
text: "Завтра ведро <br> побольше.",
textpos: [206, 889]
},
];
const fishImages = [
{src: "pictures/Karas_P.gif", pos: [330, 600]},
{src: "pictures/Karas_L.gif", pos: [345, 670]},
{src: "pictures/Karas_P.gif", pos: [330, 600]},
{src: "pictures/Karas_L.gif", pos: [345, 670]},
];
const fishImages_1 = [
{src: "pictures/Karas_P.gif", pos: [330, 600]},
{src: "pictures/Karas_L.gif", pos: [345, 670]},
{src: "pictures/Karas_P.gif", pos: [330, 600]},
{src: "pictures/Karas_L.gif", pos: [345, 670]},
{src: "pictures/Karas_P.gif", pos: [330, 600]},
{src: "pictures/Karas_L.gif", pos: [345, 670]},
{src: "pictures/Karas_P.gif", pos: [330, 600]},
{src: "pictures/Karas_L.gif", pos: [345, 670]},
{src: "pictures/Karas_P.gif", pos: [330, 600]},
{src: "pictures/Karas_L.gif", pos: [345, 670]},
{src: "pictures/Karas_P.gif", pos: [330, 600]},
{src: "pictures/Karas_L.gif", pos: [345, 670]},
{src: "pictures/Karas_P.gif", pos: [330, 600]},
];
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;`
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: 1;'
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;`
await delay(4500);
}
}
cycle();
Файл представил.
