III, судя по тому что я увидел, вы с кодом даже не на "вы", а по "фамилии/отчеству".
Глядите, что у меня получилось поправив синтаксические ошибки в html и css и запустив ваш код после нажатия на кнопку "Нажми меня":
*!*
АХТУНГ: звук НЕВОЗМОЖНО отключить до перезагрузки страницы!
*/!*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Андрюха день рождения</title>
<style>
.container {
width: 100%;
margin: 0 auto;
max-width: 1064px;
}
.image-stack::after {
content: ' ';
display: table;
clear: both;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
z-index: 10;
}
@supports (display: grid) {
.image-stack {
display: grid;
position: relative; // необходимо, чтобы перекрытие работало
grid-template-columns: repeat(12, 1fr);
}
#test {
float: left;
z-index: 5;
}
.voda {
float: left;
z-index: 1; // говорит браузеру сделать это изображение сверху
}
.prud {
float: left;
z-index: 1; // говорит браузеру сделать это изображение сверху
}
.voda {
width: 1064px;
height: 310px;
grid-column: 4 / -1;
grid-row: 1;
margin-top: 20em;
margin-left: 0em;
}
.prud {
grid-column: 4 / -1;
grid-row: 1;
margin-top: 6.2em;
margin-left: 0em;
}
#test {
width: 32vw;
height: 25vw;
position: absolute;
top: 0;
left: -19em;
top: 4em;
right: 0;
margin: auto;
text-align: left;
color: white;
font: 500 30px/1.5 'Syncopate', sans-serif;
font-style: italic;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0, 0, 0, 0.10),
0 0px 5px rgba(0, 0, 0, 0.10),
0 1px 3px rgba(0, 0, 0, 0.30),
0 3px 5px rgba(0, 0, 0, 0.20),
0 5px 10px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.20),
0 20px 20px rgba(0, 0, 0, 0.15);
font-size: 2vw;
}
}
</style>
</head>
<body>
<div class="overlay">
<button type="button" disabled>
Загрузка...
</button>
</div>
<div class="container">
<div class="image-stack">
<img class="voda" src="pictures/Вода.gif" alt="" />
<img class="prud" src="pictures/Пруд.png" alt="" />
<div id="test">
С днём рождения, Андрюха !<br>
Дорогой наш рыбачок,<br>
Пусть всегда, без промедления,<br>
Рыбка дёргает крючок.<br>
Чтобы ты её, родную, <br>
Не ждал полдня на берегу, <br>
А ловил её большую, <br>
В море, в речке и в пруду ! <br>
</div>
</div>
</div>
<script>
const MP3_URL = 'https://mp3bob.ru/download/muz/Rick_Astley_-_Never_Gonna_Give_You_Up_[www.mp3pulse.ru].mp3';
document.addEventListener('DOMContentLoaded', () => {
// Для печати стихотворения
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;
}
button.textContent = 'Нажми на меня';
button.disabled = false;
button.addEventListener('click', () => {
document.querySelector('.overlay')?.remove();
audio.muted = false;
audio.loop = true;
audio.volume = 1; // 0..1
play();
printText();
}, {
once: true
});
});
audio.addEventListener('error', () => {
alert(audio.error?.message ?? 'Something went wrong');
});
audio.src = MP3_URL;
});
</script>
</body>
</html>
UPD. хотел вкорячить сюда еще и подключенные графические файлы как base64, но они слишком тяжелые, так что превью обойдется без них.