Đoạn js thêm code vào màn hình khi chạy auto

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

Bài đăng phổ biến từ blog này

Các cách fix mongodb khi bị lỗi

Gỡ mysql và cài lại