Is there a way to make a user's name cycle through an animation that changes the string of their name?

Example:

Ace 1 --> Ace --> Ac --> A --> Ac --> Ace --> Ace 1

Hi,

Yes it is possible. But where do you want to apply it?

Here's a function to animate this:

Code:

(function($) {
    $.fn.writeText = function(content) {
        var contentArray = content.split(""),
            current = 0,
            elem = this;
        setInterval(function() {
            if(current < contentArray.length) {
                elem.text(elem.text() + contentArray[current++]);
            }
        }, 500);
    };
   
})(jQuery);
$("#test").writeText("TESTANIMATE123");


It'll basically write one letter at a time with a 0.5s of delay. The same way to "undo" the animation so it can go backwards. If you just want this in a HTML page it is as easy as 123. Just add them with the tag <script> and call it's span where you want it to be animated.

<span id="test"></span>

Regards.

This makes sense however, I don't want this in an html page. I want animate a selector in CSS.

For example:

Code:

a[href="/u1"] { animation: test 5s; } /*TestAnimate123 has a length of 10; each letter will take 5s */

Hi,

It's impossible to combine a CSS tag with a JS code. :S What we could try doing is combining a HTML tag with a JS.

Regards.