飞行气球与抛物面动画

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

});