The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Keyframes Content Change

View previous topic View next topic Go down

Keyframes Content Change

Post by Ace 1 on 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
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Re: Keyframes Content Change

Post by Ace on 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
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

Re: Keyframes Content Change

Post by Ace 1 on 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
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Re: Keyframes Content Change

Post by Ace on 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
Forumember

Posts : 250
Reputation : 49
Language : Portuguese & English

http://ajuda.forumeiros.com/u39577

Back to top Go down

View previous topic View next topic Back to top


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