Animating Characters, Words or Paragraphs with Blast.js

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

Check this demo below:

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

advertisement

About The Author

  • ADD YOUR COMMENT

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!