Приближаются праздники и каждый владелец сайта хочет украсить его чем-то уникальным. Меня попросили сделать так, чтобы внизу экрана бегал снеговик. Задумка должна была быть реализована на чистом JS.
Готовый код бегающего влево и вправо снеговика
// Ждем загрузки страницы
document.addEventListener("DOMContentLoaded", function () {
// Создаем элемент для снеговика
const snowman = document.createElement("img");
snowman.src = "snowman.png"; // Путь к картинке с персонажем
snowman.alt = "Snowman";
snowman.style.position = "fixed";
snowman.style.bottom = "0px";
snowman.style.left = "0px";
snowman.style.zIndex = "1000";
snowman.style.width = "100px"; // Устанавливаем размер снеговика
// Добавляем снеговика к странице
document.body.appendChild(snowman);
// Настройка анимации
let direction = 1; // 1 для движения вправо, -1 для движения влево
const speed = 3; // Скорость движения
let angle = 0; // Текущий угол наклона
let angleDirection = 1; // Направление изменения угла
const maxAngle = 10; // Максимальный угол наклона
function moveSnowman() {
// Получаем ширину экрана
const screenWidth = window.innerWidth;
// Текущая позиция снеговика
const currentLeft = parseFloat(snowman.style.left);
// Проверяем границы экрана
if (currentLeft + snowman.offsetWidth >= screenWidth) {
direction = -1; // Меняем направление на влево
} else if (currentLeft <= 0) {
direction = 1; // Меняем направление на вправо
}
// Обновляем позицию снеговика
snowman.style.left = currentLeft + speed * direction + "px";
// Обновляем угол наклона
angle += angleDirection;
if (angle >= maxAngle || angle <= -maxAngle) {
angleDirection *= -1; // Изменяем направление наклона
}
snowman.style.transform = `rotate(${angle}deg)`;
// Запускаем следующий кадр анимации
requestAnimationFrame(moveSnowman);
}
// Запуск анимации
moveSnowman();
});
Примечание.
Картинка не просто перемещается влево и вправо, она ещё и меняет угол наклона. Таким образом кажется, что персонаж ходит или бегает.
