Javascript falling letters: Every other letter different direction

Question

I'm having a hard time finding a way to insert falling letters into my code. My task is to have a text string and have all the even-placed letters fall from the top and the odd-placed letters fly from the bottom and come together to form the string in the center.

So for instance, I have: <span class="uName">John Doe</span>

I would like the letters: O, N, D, E to fall from the top.

Likewise: J H _ O to fly up from the bottom. (keeping their respective horizontal positions).

Here's what I have so far, however I'm fairly inexperienced with JavaScript/JQuery and I can't get it to run.

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

Thanks so much in advanced!

P.S. If this task can be achieved with just CSS3, I would much prefer that option but I'm not sure if it's possible.

this will involve a LOT of crazy markup (breaking words into spans, identifying odd vs even spans, etc), so its not as simple as you think. that said, GSAP has a plugin called SplitText that does this exact piece ... its not jQuery, but if you're doing Javascript animation you should be learning GSAP anyway. ;) — PlantTheIdea, Mar 11 '14 at 18:56
This task is for an assignment and all I need to do is have the flying text. So the html is just that one line... http://jsfiddle.net/PP44C/2/ — DonJuma, Mar 11 '14 at 18:58
@PratikJoshi Just the JQuery part to assign them the top/bottom classes. But no animation/movement is working. — DonJuma, Mar 11 '14 at 18:59
you can take help from this post http://stackoverflow.com/questions/5312123/technique-to-create-falling-letters-and-words — Arjit, Mar 11 '14 at 19:06
What kind of animation you want??In which direction you want,for how much time you want ?Specify something — Pratik Joshi, Mar 11 '14 at 19:15
@PratikJoshi In the posters question he did specify that he wants letters being assigned the "Top" class to fall from the top towards the center, and letters with the "bottom" class to fly from the bottom towards the center. — SimplyAzuma, Mar 11 '14 at 19:32
I Updated the solution ,just add some logic as you want.i almost did it. — Pratik Joshi, Mar 11 '14 at 20:14
Well, why are people helping him do his homework, under any code of ethics in schools this would be termed "someone else's work" and cheating. I think I will write a script to catch this sort of cheating on assignments :) — alexmac, Mar 12 '14 at 03:51

Pratik Joshi · Accepted Answer · 2014-03-12T03:47:50.267

//css

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

//Script

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

//NEW Fiddle link http://jsfiddle.net/PP44C/7/

Now everything is fine as you want . check it

I believe the poster wants letters to animate from the top/bottom into the center. — SimplyAzuma, Mar 11 '14 at 19:29
Using this and the CSS code block I managed to get things working. However, I can't seem to get the bottom text to actually start from the bottom of the screen even though bottom is set to 0px. — DonJuma, Mar 11 '14 at 23:01

Javascript falling letters: Every other letter different direction

1 Answers1