It is ridiculously hard to find easy/simple animated text. Like the "Implosion" on this website http://codecanyon.net/item/jquery-text-animation/full_screen_preview/233445 but I'd have to pay for it. Actually any kind of simple onclick text fade in would be very cool. Any suggestions, links, or help?
Asked
Active
Viewed 7,116 times
8
-
2Just in case anyone's shy about clicking the link - it is pretty awesome, worth checking out. – Wesley Murch Jun 30 '11 at 17:36
-
1I get not paying for jQuery plugins but he's only asking $5, I'd go with buying the plugin or use fadeIn/fadeOut jQuery effects. – MikeM Jun 30 '11 at 18:10
-
2@Wesley: some may think it's awesome, some may think they sit in a time-machine and are stranded at a old MS-Frontpage-demonstration ^^ – Dr.Molle Jun 30 '11 at 18:20
-
1One thing you definitely shouldn't do is decode his plugin and use it without a license. It's not like it would be really easy to do or anything since it's client sided. – Steve Robbins Jun 30 '11 at 18:49
-
Please give feedback on the answers – ariel Jul 06 '11 at 19:46
3 Answers
14
Its not so hard to create such an effect using jQuery. Create a single element vor every character, move it somewhere and then animate it back to original position.
A simple example: http://jsfiddle.net/doktormolle/dNXVx/

Dr.Molle
- 116,463
- 16
- 195
- 201
-
Great work... how much do we owe you? :D Seriously though, this is perfect. – Wesley Murch Jun 30 '11 at 18:25
-
I don't know if it's legal to sell it, maybe MS has a copyright on this effect :D – Dr.Molle Jun 30 '11 at 18:31
-
3
Just use fadeIn jquery function (documentation):
$("#button").click(function() {$("#container").fadeIn()});
Sample: http://jsfiddle.net/cVELa/

ariel
- 15,620
- 12
- 61
- 73
-
@valipour "Actually any kind of simple onclick text fade in would be very cool." – ariel Jun 30 '11 at 17:22
-
the problem is not fading a text in - the effect is far more complex! run effects in the link – Mo Valipour Jun 30 '11 at 17:27
0
Try Textillate.js! It allows you to animate text with effects such as flash, bounce, shake and more. In all, Textillate.js contains more than 25 effects for you to apply to your text.