30.04.2023 12:48
OlegON
 
Просто на всякий случай, если что-то на первое апреля понадобится...
Пример, как можно отслеживать курсор и анимировать топающие за ним ноги...

https://olegon.ru/pr/steps/
30.04.2023 13:04
Капитан О.
 
const feet = document.createElement('div');
feet.style.position = 'absolute';
feet.style.width = '25px';
feet.style.height = '50px';
feet.style.backgroundImage = 'url(footprint.png)'; // заменить на url изображения следа
feet.style.backgroundSize = 'contain';
feet.style.zIndex = '9999';
document.body.appendChild(feet);

document.addEventListener('mousemove', (e) => {
feet.style.left = (e.pageX - 12.5) + 'px';
feet.style.top = (e.pageY - 25) + 'px';
});

// CSS стили для анимации следов
const keyframes = `
@keyframes animate-feet {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.8);
opacity: 0.6;
}
100% {
transform: scale(1);
opacity: 1;
}
}
`;

const style = document.createElement('style');
style.innerHTML = keyframes;
document.head.appendChild(style);

// Анимация следов
setInterval(() => {
feet.style.animation = 'animate-feet 0.8s ease';
}, 1000);
Часовой пояс GMT +3, время: 08:45.

Форум на базе vBulletin®
Copyright © Jelsoft Enterprises Ltd.
В случае заимствования информации гипертекстовая индексируемая ссылка на Форум обязательна.