Search jQuery

jQuery Forum

How to use animate() to change color of text vertically?

in Using jQuery • 4 years ago

How can i use jquerys animate()-function to change the color of a text vertically?

I have a text called "EXAMPLE" which is in color black. Now i want to animate this text in the way to change the color of the EXAMPLE text vertically from bottom to top to 50%, so that the the color of the text is to 50% percent in red and 50% in black. It should be like a progressbar which animates from left ro right, but in my case it should go from bottom to top and not change the background-color, but the text-color itself.

But keep in mind that the percentages could be dynamically so don't want anything hard coded stuff. Is it possible to do that with jquery animate()?

Replies(1)

watusiware

Re: How to use animate() to change color of text vertically?

4 years ago

Text can only have a single color. If you Google, you will find some kludges for e.g. making top half (or whatever fraction) one color, and bottom half another, by using duplicate strings and clipping.

You could do it by creating your text as an SVG graphic but using shapes for the text, rather than characters. (SVG can contain text nodes.) Then you can e.g. style the shapes using a gradient and you could animate the gradient. You can style SVG with CSS, if you embed the SVG directly into the document.

Use CSS animation, not jQuery Animate. jQuery animate is seldom the best way to to animation today anyway.

In any case, jquery animate can't do it.

Top Reply

Response title

Attachments

jQuery Forum

How to use animate() to change color of text vertically?

Replies(1)

Re: How to use animate() to change color of text vertically?

Statistics

Tags

Actions