Как сделать вертикальную бесконечную бегущую строку из фото?

Для создания вертикальной бесконечной бегущей строки из фото на веб-странице с помощью JavaScript, можно воспользоваться следующим подходом:

1. Создайте HTML элемент, в котором будет отображаться изображение. Например:

<div id="imageContainer">
    <img src="image.jpg" id="image" alt="Image">
</div>

2. Используйте CSS для стилизации контейнера изображения. Например, задайте высоту и ширину контейнера, а также скрытие вертикального переполнения:

#imageContainer {
    height: 100px;
    width: 100px;
    overflow: hidden;
}

3. Напишите JavaScript код, который будет анимировать движение изображения внутри контейнера. Вот пример кода:

const image = document.getElementById('image');
const container = document.getElementById('imageContainer');
const containerHeight = container.clientHeight;

let position = 0;

function moveImage() {
    position--;
    if (position <= -image.height) {
        position = containerHeight;
    }
    image.style.transform = `translateY(${position}px)`;
}

setInterval(moveImage, 10);

Данный код устанавливает интервал, в рамках которого функция moveImage будет вызываться, анимируя движение изображения вверх. При достижении конца изображения, оно перемещается обратно вниз, создавая эффект бесконечной анимации.

4. Убедитесь, что ваш скрипт подключен к HTML документу:

<script src="script.js"></script>

После этих шагов у вас должна появиться вертикальная бесконечная бегущая строка из фото, которую можно дальше настраивать и стилизовать по вашему усмотрению.