<!DOCTYPE html>
<html style="background:#00FF00;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>彈幕展示</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
</head>
<body>
<button id="button01">發射</button>
<script>
const button01 = document.getElementById("button01");
button01.addEventListener("click", function(){createText()}, false);
let count = 0;
async function createText() {
let div_text = document.createElement('div');
div_text.id="text"+count;
count++;
div_text.style.position = 'fixed';
div_text.style.whiteSpace = 'nowrap'
div_text.style.left = (document.documentElement.clientWidth) + 'px';
var random = Math.round( Math.random()*document.documentElement.clientHeight );
div_text.style.top = random + 'px';
div_text.appendChild(document.createTextNode('移動中'+count));
document.body.appendChild(div_text);
await gsap.to("#"+div_text.id, {duration: 5, x: -1*(document.documentElement.clientWidth+div_text.clientWidth)});
div_text.parentNode.removeChild(div_text);
}
</script>
</body>
</html>