javascript - JQuery/GSAP - 彼此并行移动多个元素

Question

我想做的是这样的:我想在页面的Y或X轴(底部和左侧边框)上生成框并让它们移动彼此平行，直到它们离开屏幕，我想将它们删除。 这是我到目前为止所做的:

<强> Codepen 。

function generate(){
  var $element = $("<div>", {class: "box"});
  //Generate random x and y coordinates
  var posy = (Math.random() * ($('body').height() - $element.width())).toFixed();
  var posx = (Math.random() * ($('body').width() - $element.height())).toFixed();
  //Place the box on the x or y axis
  var rand = Math.floor(Math.random()*2);
  if(rand==0)
  {
    posx=0;
  }else{
    posy=0;
  }

  $element.css(
  {'position':'absolute',
  'right':posx+'px',
  'bottom':posy+'px'});
  $("body").append($element);

  //Move box diagonally, all the boxes paths are parallel
    TweenLite.to($element, 2, {top:0, right:0, ease:Power2.easeOut});

  //Delete boxes offscreen
  var $boxes=$(".box");
  /*$boxes.each(function(){
    if($(this).position().left >1300){
      $(this).remove();
    }
  });*/
}

我的问题是:如何准确找到为框设置动画的正确点，从而使所有框彼此平行移动？ 另外，有没有一种方法可以不使用外部插件来查找元素是否超出页面范围？ 感谢您的回答!

编辑: 这是一张图，可以更好地解释我自己。对不起我糟糕的绘画技巧!

现在所有的盒子都汇聚到同一个 top:0 和 right:0 点，但我想让它们彼此平行，所以，他们每个人都应该有不同的顶部/右侧点。我猜我的问题是计算它，但我到底该怎么做呢？这也干扰了我认为的屏幕外问题。

Answer 1

是 this 您想要创造什么样的效果？

JavaScript:

function generate(){
  var windowHeight = $(window).height();
  var windowWidth = $(window).width();
  var $element = $('<div>', {class: 'box'});
  var initX = parseInt(Math.random() * windowWidth) - (windowWidth * 0.5);
  var destX = parseInt(initX) + $(window).height();

  $('body').append($element);
  TweenLite.fromTo($element, 2, {x:initX, y:0}, {x:destX, y:-windowHeight, ease:Power2.easeOut, onComplete: onCompleteAnimation, onCompleteParams: [$element]});
}

function onCompleteAnimation($element) {
  $element.remove();
}

你会注意到我没有制作动画top和left (或 right )具有 position: absolute; 的属性你之前正在做的事情。相反，我正在制作 x 动画和y本质上是 translate(x, y)值(value)观。这使得动画看起来很流畅: Link 。

希望这有帮助。