Javascript-форум - Анимация картинок с удалением, при выходе за пределы окна браузера

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Анимация картинок с удалением, при выходе за пределы окна браузера (https://javascript.ru/forum/jquery/62110-animaciya-kartinok-s-udaleniem-pri-vykhode-za-predely-okna-brauzera.html)

Анимация картинок с удалением, при выходе за пределы окна браузера

Здравствуйте.

Подскажите, пожалуйста, как сделать такую же анимацию как на этом сайте

Есть фоновое изображение, есть другие картинки которые передвигаются на его фоне.

Саму анимацию я сделал, но не могу понять как:
1) удалять изображение при выходе за пределы окна браузера (у меня просто расширяется окно. Overflow: hidden мне не помог.
2) как движение сделать цикличным? Т.е картинка доходит до конца окна, исчезает за его пределами, а потом появляется вновь после короткой задержки.

Сделал на JS Bin визуализацию чтобы было понятней что именно я хочу.

Delagardi, Здравствуйте. Сам столкнулся с подобной проблемой. Еще новичок,, так что пробовать писать ваш код не осмелюсь, но кажется я нашел путь к решению.
Для того, чтобы объект уходил за края окна и не расширял окно, можно изображение поместить в <div>, у которого width: 100%;
После этого объекту присвоить класс допустим .object и в jQuery написать примерно следующее:
$('.object').animate({left: '100%'}, speed, 'linear', function() {
$('.object').remove();
объект проплывет всю <div> а после того будет удален.
На сайте http://perevozkin24.ru/ та же штука. Если последить за страницей через инструменты разработчика, видно, что передняя машинка у них уезжает за пределы <div> бесконечно, фоновые же покинув границы <div> тут же исчезают.

вот можете посмотреть и файл JS их сайта:http://perevozkin24.ru/wp-content/th...nTM/js/cars.js
Ибо как этот процесс добавления и удаления зациклен я пока не понял.

Delagardi,

<!DOCTYPE html>

<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.bg-image {position: relative;
  width: 100%;
  height: 470px;
  background: url("http://www.adventuregamestudio.co.uk/images/games/709.jpg") center center;
  overflow: hidden;
  margin-bottom: 10px;
}

.block-list {
  margin-left: 200px;
  overflow: hidden;

}

.truck1 {
  position: absolute;
  width: 256px;
  height: 256px;
  left: 0;
  top: 180px;
  background: url("http://www.clipartbest.com/cliparts/dT6/aog/dT6aogaEc.png") no-repeat;
}
</style>
</head>
<body>
  <div class="bg-image">
    <div class="block-list">
      <p><button id="go">Run »</button></p>
      <div class="truck1"></div>
    </div>
  </div>
<script>$(document).ready(function() {
  $("#go").click(function() {


    $(".truck1").stop().animate({
      left: "100%"
    }, {
      duration: 5000,
      easing: "linear",
      complete  : function() {
        $(this).css({left : -256 })
        $("#go").click()
      }

    });
  });

});
</script>
</body>
</html>