Скринсейвер (Screensaver)

<!--Скринсейвер (Screensaver)-->
<!--https://mt-webdesign.ru/screensaver-->
<div class="screensaver-wrapper">
<div class="screensaver-box"></div>
</div>
<style>
.screensaver, .screensaver .tn-atom {
width: 100%;
height: 100%;
display: block;
background-size: cover;
}
.screensaver-wrapper {
position: fixed;
inset: 0;
display: none;
z-index: 9999;
pointer-events: none;
}
.screensaver-wrapper.active {
display: block;
}
.screensaver-box {
position: absolute;
height: 120px;
width: 120px;
}
</style>
<script>
if (window.matchMedia('(min-width: 961px)').matches) {
$('.screensaver').appendTo('.screensaver-box');
const wrapper = document.querySelector('.screensaver-wrapper');
const box = document.querySelector('.screensaver-box');
let x = 100;
let y = 100;
let dx = 2;
let dy = 2;
let animationFrame = null;
let hiddenTime = 0;
let isActive = false;
const idleDelay = 10000; // сколько должен отсутствовать пользователь (10 сек)
function animate() {
const width = window.innerWidth;
const height = window.innerHeight;
const boxWidth = box.offsetWidth;
const boxHeight = box.offsetHeight;
x += dx;
y += dy;
if (x + boxWidth >= width || x <= 0) dx *= -1;
if (y + boxHeight >= height || y <= 0) dy *= -1;
box.style.transform = `translate(${x}px, ${y}px)`;
animationFrame = requestAnimationFrame(animate);
}
function startScreensaver() {
if (isActive) return;
isActive = true;
wrapper.classList.add('active');
animate();
window.addEventListener('mousemove', stopScreensaver);
window.addEventListener('mousedown', stopScreensaver);
window.addEventListener('keydown', stopScreensaver);
window.addEventListener('touchstart', stopScreensaver);
}
function stopScreensaver() {
if (!isActive) return;
isActive = false;
wrapper.classList.remove('active');
cancelAnimationFrame(animationFrame);
window.removeEventListener('mousemove', stopScreensaver);
window.removeEventListener('mousedown', stopScreensaver);
window.removeEventListener('keydown', stopScreensaver);
window.removeEventListener('touchstart', stopScreensaver);
}
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
hiddenTime = Date.now();
}
if (document.visibilityState === 'visible') {
const timeAway = Date.now() - hiddenTime;
if (timeAway > idleDelay) {
startScreensaver();
}
}
});
}
</script>