Today I want to show you how to create a fun little typography effect with CSS animations and text shadows. Maybe you know those eerie opening sequences of movie trailers where some text is being faded in on a dark background. After seeing Introducting Briefs (which is not a terror movie trailer but a preview for an interesting app) I got inspired for recreating the effect using CSS. we’ll use Dave Rupert’s Lettering.js to wrap the words and letters into multiple spans.
All posts in Text Effect
jQuery WebFonts extension adds font embedding capability to jquery using the WebFonts technology. The extension provides a flexible way to choose font from a font repository and apply on html elements.
- Flexible font repository. The extension can work with any font repository file system.
- Provides many APIs to customize and extend.
- Applies font based on the html
langattribute of the elements
- Make sure the font defined using
font-familystyle for any elements, either using inline css or external css’ available for the reader. – without any extra code.
Badonkatrunc is a jQuery plugin for dynamic text truncation and layout. Use it to truncate excerpts of unpredictable length, find the optimal font size for groups of elements or dynamically resize text for a responsive layout!
Squishy is a jQuery plugin that automatically resizes text to exactly fit the container with no extra work on your part.
You can pass the script a number of options to restrict the squishiness.
maxSize is used to set the maximum font size,
minSize is used to set the minimum font size,
maxWidth sets the maximum width of the line of text, and
minWidth, the minimum (all in pixels, for now).
TextFX2 is a CSS3 Transition + CSS3 3D Transform plugin, and as stated above, all animations will revert to a simple fade for IE8, IE9 and Opera.
- Easily create animated sequences like the one shown in the demo. No manual scripting involved!
- Animate multiple lines of text, examples included in source.
- Option to automatically loop sequenced animations.
- Option to randomize a sequence.
- Hyperlink animated text.
- Animate text on the fly with TextFX2’s API methods.
- Free from jQuery = no jQuery conflicts!
Makes typing & deleting in input / textarea fields exciting with CSS3 effects and jQuery
jQuery Text Animation Plugin is for making custom text animations.
CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and scale your web type with real CSS rules, automatically.
Kerning.js is a single script, small, and has no dependencies. Add it to your page, add some CSS rules, and your text will be beautified.
Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.
Need a waving text? There is no need to use static images any more. This script will help you! Wave Text Effect is a jQuery plugin that creates a “wave effect” out of an HTML header. Most important – waving text will be friendly for search engines, editable, selectable. You can use wave period, amplitude and spacing between the letters to customize your effect. For further styling you can still use style sheets – changing your font type, size, colour, background, etc.
- Wave configuration (amplitude, period and letter spacing).
- You can use CSS to style your text, change color, fonts, add backgrounds etc.
- Generated text is still selectable.
- This transformation is SEO friendly!