Posted in Jquery

Animating Characters, Words or Paragraphs with Blast.js

Animating Characters, Words or Paragraphs with Blast.js Posted on March 8, 2015Leave a comment

Deepanker Verma is the CEO of Techlomedia and a full time blogger. On this blog, he shares web design resources, SEO tips blog monetization tips.

Blast.js jQuery plugin
Best WordPress Hosting

Animating an element with jQuery or CSS is an easy task. But what if you want to animate each and individual character of a line. What if you want to animate each word of the paragraph. For traditional animation, you need to put each element in a different span and then apply effect. For example if you want to animate all characters, you need to put all characters in different span. This will increase overhead. This is why Blast.js exists and it makes the work simple. With this new jQuery plugin, you can easily animate characters, words or paragraphs.

Blast.js is a powerful jQuery plugin and offers lot more features. It separates texts for typography manipulation. You can use any of 4 given separators: character, word, sentence, and element. It also supports regular expressions for custom phrase matching in delimiter criteria.

For example if you have a H1 heading like below and you want to animate each word.

Use this jQuery code. We want to animate word, so use delimiter: word.

Above jQuery code will separate the heading like below and will apply effects.

Blast.js

Advertisement

Check this demo below:

See the Pen Blast.js – Option: Delimiter by Julian Shapiro (@julianshapiro) on CodePen.

advertisement

Deepanker Verma is the CEO of Techlomedia and a full time blogger. On this blog, he shares web design resources, SEO tips blog monetization tips.

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!