const style = `
<style>
#floatingText {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 7em;
font-weight: bold;
color: white;
text-shadow: -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black, 3px 3px 0 black,
-6px -6px 0 black, 6px -6px 0 black, -6px 6px 0 black, 6px 6px 0 black;
padding: 10px;
background-color: transparent;
z-index: 999999;
pointer-events: none;
}
</style>
`;
const html = `
<div id="floatingText">${PROFILE_NAME}</div>
`;
document.head.insertAdjacentHTML('beforeend', style);
document.body.insertAdjacentHTML('beforeend', html);
function updateFloatingTextPosition() {
const floatingText = document.getElementById('floatingText');
const textWidth = floatingText.offsetWidth;
const textHeight = floatingText.offsetHeight;
floatingText.style.top = `calc(50% - ${textHeight / 2}px)`;
floatingText.style.left = `calc(60% - ${textWidth / 2}px)`;
}
window.addEventListener('resize', updateFloatingTextPosition);
window.addEventListener('DOMContentLoaded', updateFloatingTextPosition);
updateFloatingTextPosition();
Nhận xét
Đăng nhận xét