Форум

Delagardi · #1 (**permalink**) 25.03.2016, 06:37

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

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

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

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

Delagardi · #2 (**permalink**) 25.03.2016, 16:17

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

StanislavIo · #3 (**permalink**) 13.05.2016, 15:13

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
Ибо как этот процесс добавления и удаления зациклен я пока не понял.

рони · #4 (**permalink**) 13.05.2016, 16:39

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>

Форум

Справочник

Discord чат

Курсы javascript