How to do this text animation?

[jimleeder123]

I’ve found a cool animation on a link on this webpage – http://www.webdesignerdepot.com/2015/07/the-quick-guide-to-speeding-up-your-websites/ – hover over the links and you’ll see.

It changes the colour of links letter by letter. Is it possible to do this just with CSS or is it JavaScript? Also how?

Note: I mean the links in the article. Not the menu.

Thanks.

[Shikkediel]

It’s done with JS in any case… I tried to post the script but that got rejected. In Firefox dev tools, you can see the mouse events that are triggering part of the script in main.js by clicking the icon placed after the a links.

[jimleeder123]

I’m trying to find it in Chrome but not having luck, whereabouts is the file please?

[Shikkediel]

This is the page’s total script :

Link

And these are the relevant pieces of code :

http://pastebin.com/JUMtwzgc

Each letter is wrapped in a span so they’re individually altered.

[jimleeder123]

Thanks – looks very complicated haha!

[Shikkediel]

Yeah, probably more than necessary. Let me see if I can whip something together with less code.

Edit – the basic idea :

Demo

[Shikkediel]

It seems they’ve changed the animation concept altogether in the meantime.

[jimleeder123]

Yeah they’ve made it a different animation and colour, the older one was better in my opinion.

[Author]

Posts