Сначала удалите onload="splash(3000)" из <body>
Создайте отдельный js файл и переместите javascript в конец </body>
...
<script async src="scripts/index.js"></script>
</body>
Script
scripts/index.js
function splash(time) {
return new Promise(resolve => {
setTimeout(() => {
$("#splash").hide();
resolve();
}, time);
});
}
function loop() {
$("#paradeFloats").css({ left: -300 });
$("#paradeFloats").animate(
{
left: "+=850"
},
10000,
"linear",
function() {
loop();
}
);
}
$(document).ready(function() {
// Wait for splash to resolve after 3 seconds, Then call loop()
splash(3000).then(() => {
loop();
});
});
Подробнее о Обещания - Также ознакомьтесь с примером раздела.
CSS
Сделайте следующее изменения в CSS, при необходимости измените.
#outer-container {
...
overflow: hidden; // Hide everything outside of #outer-container
}
#splash {
align-items: center;
background-color: #fff;
border: 3px solid #000;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
vertical-align: middle;
z-index: 9999;
}
#splash-content {
font-style: italic;
font-size: 30px;
}
Пример Codesandbox
https://codesandbox.io/s/laughing-dream-8c4r9