Наближаються свята і кожен власник сайту хоче прикрасити його чимось унікальним. Мене попросили зробити так, щоб внизу екрана бігав сніговик. Задумка повинна була бути реалізована за допомогою чистого 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();
});
Примітка.
Картинка не просто переміщується вліво та вправо, вона ще й змінює кут нахилу. Таким чином здається, що персонаж ходить чи бігає.
