Просто работал с ИИ и получился такой код, который при желании можно разместить в виджет HTML форума например Xenforo или на любой другой сайт, размещаем наш код:
Получается такой результат:
Скрипт позволяет настраивать скорость движения и время задержек между движениями.
HTML:
<img id="movingGif" src="orig.gif" alt="Moving GIF" />
<style>
#movingGif {
position: absolute;
width: 250px;
height: auto;
bottom: 117px;
}
body {
overflow: hidden;
}
</style>
<script>
const gif = document.getElementById('movingGif');
const screenWidth = window.innerWidth;
let position = -gif.width; // Начальная позиция (за пределами левого края экрана)
const speed = 2; // Скорость движения
const delay = 2000; // Время задержки после исчезновения (в миллисекундах)
function moveGif() {
position += speed; // Двигаем GIF вправо
// Если GIF уходит за правый край экрана
if (position > screenWidth) {
gif.style.display = 'none'; // Скрываем GIF
setTimeout(() => {
position = -gif.width; // Сбрасываем на левую границу экрана
gif.style.display = 'block'; // Показываем GIF
moveGif(); // Запускаем движение снова
}, delay);
} else {
gif.style.left = position + 'px'; // Обновляем позицию GIF
requestAnimationFrame(moveGif); // Продолжаем анимацию
}
}
// Начинаем движение
moveGif();
</script>
Скрипт позволяет настраивать скорость движения и время задержек между движениями.