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

Мои вопросы: как я могу точно найти правильную точку, где анимировать окно, таким образом, чтобы переместить все коробки параллельно друг другу? А также есть ли способ без использования внешних плагинов, чтобы узнать, вышел ли элемент из границ страницы? Спасибо за любой ответ!

EDIT: Вот чертеж, чтобы объяснить себя лучше. Извините за мои страшные навыки рисования!

Теперь все коробки сходятся к одной и той же top:0right: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). Это делает анимацию гладкой: Link.

Надеюсь, это поможет.