The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Keyframes Content Change

2 posters

Go down

Keyframes Content Change Empty Keyframes Content Change

Post by Ace 1 November 26th 2015, 2:13 am

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
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Keyframes Content Change Empty Re: Keyframes Content Change

Post by Ace November 26th 2015, 3:16 am

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.
Ace
Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Keyframes Content Change Empty Re: Keyframes Content Change

Post by Ace 1 November 26th 2015, 9:44 pm

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 */

Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Keyframes Content Change Empty Re: Keyframes Content Change

Post by Ace November 29th 2015, 5:06 am

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.
Ace
Ace
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum