Javascript下落字母：每隔一个字母的方向不同

我很难找到在代码中插入落体字母的方法。我的任务是创建一个文本字符串，让所有的偶数字母从顶部落下，奇数字母从底部飞出，并在中间形成字符串

例如，我有：

johndoe

我希望字母：O，N，D，E从上面掉下来

同样：J H_O从底部向上飞。（保持各自的水平位置）

这是我到目前为止所拥有的，但是我对JavaScript/JQuery相当缺乏经验，无法运行它

vertical = new Array(80);
var textPos = 0;
for(var i = 0; i < 80; ++i) {
    vertical[i] = textPos;
    textPos += 5;
}

function poz(){
    document.getElementsByClassName("tops").style.top = '0px';
    document.getElementsByClassName("bottoms").style.bottom = '0px';
    animate();
}
function animate(){
    for(var j = 0; j < 80; ++j) {
        document.getElementsByClassName("tops").style.top = vertical[j] + "px";
        document.getElementsByClassName("bottoms").style.bottom = vertical[j] + "px";
    }

}

$('.uName').each(function(){
    var letters = $(this).text().split('');
    $(this).text('');
    for(var i = 0; i < letters.length; i++){
        if(i % 2 == 0){
            $(this).append('<span class="tops">' + letters[i] + '</span>');
        }
        else{
            $(this).append('<span class="bottoms">' + letters[i] + '</span>');
        }
    }
    poz();
});

vertical=新阵列（80）；
var textPos=0；
对于（变量i=0；i<80；++i）{
垂直[i]=textPos；
textPos+=5；
}
函数poz（）{
document.getElementsByClassName（“tops”）.style.top='0px'；
document.getElementsByClassName（“bottoms”）.style.bottom='0px'；
制作动画（）；
}
函数animate（）{
对于（var j=0；j<80；++j）{
document.getElementsByClassName（“tops”）.style.top=vertical[j]+“px”；
document.getElementsByClassName（“bottoms”）.style.bottom=vertical[j]+“px”；
}
}
$（'.uName'）。每个（函数（）{
var letters=$（this.text（）.split（“”）；
$（此）.text（“”）；
对于（变量i=0；i

非常感谢您的光临

p.S.如果仅使用CSS3就可以完成此任务，我更希望使用此选项，但我不确定是否可行。

/css

.bottoms{
    margin-top:200px!important;
}

//剧本

  vertical = new Array(80);
var textPos = 0;
for(var i = 0; i < 80; ++i) {
    vertical[i] = textPos;
    textPos += 5;
}

function poz(){

   // $(".tops").css('top','0px');
   // $(".bottoms").css('bottom','0px');
    //document.getElementsByClasjqsName("bottoms").style.bottom = '0px';
    animate();
}
function animate(){

    for(var j = 0; j < 80; ++j) {
     //alert(vertical[j]);
    //$(".tops").css('top',vertical[j]+'px');
    //$(".bottoms").css('bottom',vertical[j]+'0');

        if(vertical[j]<101){
   $(".tops").animate({top:vertical[j]+'px'},500);
   $(".bottoms").animate({bottom:vertical[j]+'px'},500);  



    $(".tops").css('position','relative');
    $(".bottoms").css('position','relative');
    $(".tops").css('float','left');
    $(".bottoms").css('float','left');

        }

 //       document.getElementsByClassName("tops").style.top = vertical[j] + "px";
   //     document.getElementsByClassName("bottoms").style.bottom = vertical[j] + "px";
    }

}

$('.uName').each(function(){
    var letters = $(this).text().split('');
    $(this).text('');
    for(var i = 0; i < letters.length; i++){
        if(i % 2 == 0){
            $(this).append('<span class="tops">' + letters[i] + '</span>');
        }
        else{
            $(this).append('<span class="bottoms">' + letters[i] + '</span>');
        }
    }
    poz();
});

vertical=新阵列（80）；
var textPos=0；
对于（变量i=0；i<80；++i）{
垂直[i]=textPos；
textPos+=5；
}
函数poz（）{
//$（“.tops”）.css（'top'，'0px'）；
//$（“.bottoms”）.css（'bottom'，'0px'）；
//document.getElementsByClasjqsName（“bottoms”）.style.bottom='0px'；
制作动画（）；
}
函数animate（）{
对于（var j=0；j<80；++j）{
//警报（垂直[j]）；
//$（“.tops”）.css（'top'，垂直[j]+'px'）；
//$（“.bottoms”）.css（'bottom'，垂直[j]+'0'）；
如果（垂直[j]这将涉及大量疯狂的标记（将单词分成跨距，识别奇数和偶数跨距，等等），那么它并不像你想象的那么简单。也就是说，GSAP有一个名为SplitText的插件，它可以完成这一部分…它不是jQuery，但如果你在做Javascript动画，你无论如何都应该学习GSAP到目前为止，有多少代码在工作？这个任务是为了一个任务，我所需要做的就是有飞行文本。所以html只是那一行…现在什么工作正常了？@PratikJoshi只是将JQuery部分分配给它们顶部/底部类。但是没有动画/运动在工作。我相信海报希望字母从顶部/底部开始动画化我进入了中心。使用这个和CSS代码块，我成功地让事情运转起来。然而，我似乎无法让底部文本真正从屏幕底部开始，即使底部设置为0px。现在一切都正常了。检查一下。你没有得到解决方案吗？