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 : jQuery based webfonts extension
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.
Features :
- 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.
Squishy : jQuery plugin for fitting text exactly to its container
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 : CSS3 Text Animations
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.
Features:
- 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!
Wave Text Effect : jQuery Plugin
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.
Features:
- 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!
