Easy Typography Animations: How to Manipulate Texts with Blast.js and jQuery
CSS and JavaScript provide access to all the elements of an HTML document – of course also to texts; however, this is limited to titles and paragraphs. Accessing single sentences and words is not that comfortable; unless they are wrapped, for example, with “” elements. The JavaScript library Blast.js makes sentences, words, and single characters accessible through CSS and JavaScript. This is a real basis for impressive typography animations. How Blast.js Works Blast.js comes from the digital pen of the Velocity.js developer Julian Shapiro from San Francisco. The MIT license is free of charge for commercial and personal projects. It is not hard to use, but you may need some explanations. Blast.js builds up on jQuery, so you need to incorporate both into the HTML document. Then the text can be easily prepared, so that each sentence, each word, and each character can be accessed through CSS or JavaScript. $(“p”).blast({ delimiter: “word” }); In the above example, all words within “
” elements are wrapped with a “” element. These “” elements are classed as “blast”. Other delimiters are “sentence” which wraps sentences with a “”, and “character” which covers single characters – including punctuation marks. If the text already has […]
- Web App Manifest: Open Websites Like Native Apps on Mobile Devices
- Flickity: Beautiful Galleries on All Devices – Responsive and…
- HTML5: Native Dialogue Windows With the New Dialog Element
- Better than Pure CSS3: Realistic and Complex Shadows with Shine.js
- HINT.css – Tooltips In Pure CSS3 And HTML5, No JavaScript Needed
- Hook.js für jQuery – Pull To Refresh For The Web