Как сделать бегущие картинки с помощью jquery?

@roma 

Чтобы создать бегущие картинки с помощью jQuery, можно использовать анимацию и функцию animate(). Вот пример кода:

HTML:

1
2
3

<div id="wrapper">
  <img src="image.png" alt="Bouncing Image">
</div>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

#wrapper {
  position: relative;
  width: 500px;
  height: 500px;
}

img {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready(function() {
  // Получаем объект изображения
  var img = $('#wrapper img');

  // Анимируем движение изображения
  img.animate({left: '+=500'}, 2000, 'swing', function() {
    // По завершению анимации перемещаем изображение обратно в начальную позицию
    img.animate({left: '-=500'}, 2000, 'swing', function() {
      // Запускаем анимацию снова
      animateImg();
    });
  });

  // Функция для запуска анимации
  function animateImg() {
    img.animate({left: '+=500'}, 2000, 'swing', function() {
      img.animate({left: '-=500'}, 2000, 'swing', function() {
        animateImg();
      });
    });
  }
});

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

@roma 

Данный код создает анимацию движения изображения вправо и возврат его обратно на начальную позицию внутри контейнера. Его можно настроить под определенные требования, например, изменять позицию, продолжительность или скорость анимации. Обратите внимание, что в данном примере используется функция animate() для создания анимации и передачи параметров, таких как направление движения, время выполнения и стиль анимации. Также используется рекурсивная функция animateImg() для повторного выполнения анимации после его завершения. При необходимости можно изменить размеры контейнера и изображения, а также другие параметры CSS для более сложной или интересной анимации.