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

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来调整容器的宽度，以适应文档就绪上浏览器的视图端口，并调整窗口大小。

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();
  });

});