10 Javascript Text Effects

Posted by & filed under Tech, Web Development. 90,568 views

There are many ways to enhance web typography, we used to use flash replacement script such as sIFR to change the font face by using flash embed, but the drawback is it’s using flash to replace existing font and it could slow down webpage. Now we moved on to font embedding service such as Typekit and the free Google font. We love this solution because it’s easy to use and integrate into existing website.

So, what if you want something a little bit more cooler without using those web services? Or perhaps, you can spice things up a little more by combining those fancy fonts you can find from web services and combine it with these cool javascript effects.

In this post, we have collected 10 Javascript text effects. Depend on how you want to show it, just don’t abuse it 🙂 because it can be quite irritating if overused.

  • letteringjs A jQuery plugin for radical web typography
  • Airport Airport is a rather simple text effect plugin for Jquery. It emulates the style of those flickering information boards you sometimes find on airports and train stations.
  • Textualizer Textualizer is a jQuery plugin allows you to transition through blurbs of text. Remove unnecessary characters, rearrange exisitng and add missing characters. Fancy.
  • jTicker jTicker takes an elements’ children and displays them one by one, in sequence, writing their text ‘ticker tape’ style.
  • jqIsoText This plugin allow us to changing size of letters in text. It starts from one font size and increment or decrement to other font size. On that way we’re getting something similar to isometric projection.
  • jRumble jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element.
  • Neon Text A tutorial of creating a neon glow text effect with CSS and jQuery. It’s image-based though.
  • TextGrad TexGrad applies color gradient effect to a blurb of text.
  • GrabBag Text Effect GrabBag text effect is a collection of fun text effects such as ypewriter, scrambled text etc
  • FitText JS FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. Interestingly, FitText website is using letteringJS!



10 Gorgeous CSS3 Buttons, Ready to Be Used!
16 Graphics Coded Purely With CSS
How to Best Balance Mixing Web Development With Content Generation