javascript - 带有抛物线动画的飞行气球

Question

我制作了一个气球从屏幕左侧移动到右侧的简单动画，但我想将其制作成抛物线运动而不是线性动画。我也想从左侧站点隐藏它而不是从左侧开始:0;

这是我的实际代码

$(document).ready(function() {

  function loop() {
    $('#promo').css({
      left: 0
    });
    $('#promo').animate({
      left: '+=100%',
    }, 10000, 'linear', function() {
      loop();
    });
  }

  loop();
});

#promo {
  position: absolute;
  z-index: 500;
  left: 0px;
  top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="promo">
  <img border="0" alt="promo balloon" src="http://www.placehold.it/50" />
</div>

Answer 1

将气球的 left 属性调整为 -50px，使其在动画开始时不可见。

此外，要停止出现滚动条，请给气球的容器 overflow: hidden。然后，您可以使用 jQuery/JavaScript 来调整容器的宽度，以适应浏览器在文档就绪时的视口(viewport)，并调整窗口大小。

CSS

.balloon-container {
    position: relative;
    height: 200px; // Set a height of your container here, or use jQuery/JavaScript
}

.balloon {
    position: absolute;
    left: -50px;
}

jQuery

$(document).ready(function() {

  function sizeContainer() {
    $('.container').css('width', window.innerWidth);
  }

  function loop() {
    $('.balloon').css('left', '-50px');

    $('#promo').animate({
      left: '+=100%',
    }, 10000, 'linear', function() {
      loop();
    });
  }

  // Run initial functions.
  sizeContainer();
  loop();

  $(window).resize(function() {
    // Re-run functions on window resize.
    sizeContainer();
  });

});