10 Amazing Animated Text CSS & JavaScript Code Snippets
You can make some pretty dazzling text effects with basic CSS and a few lines of JavaScript. These effects range from text display animations to 3D rotations or anything else you can imagine.
And in this post I’ve cataloged 10 of the coolest examples from around the web showcasing what you can do with just a little bit of stylized text and CSS code.
You might also like these CSS Animation Tools.
1. Title Animation
This animated title effect by Robin Treur follows the style of many movies or video games. The letters take on a protruding 3D effect using CSS3 text shadows along with a slight diagonal slant.
The fade-in animation style reminds me of classic movies from the 1930s with the same slanted text. Everything is controlled through CSS but the “restart” button is built using JavaScript. This way you can play the animation many times over to get a better look.
2. Shattering
Creating broken shattering text is a simple task with tools like After Effects, but creating a text shatter animation with code is a whole lot tougher, making this pen by Arsen Zbidniakov quite impressive.
The text is actually built using SVG shapes which makes the animation process a little easier. This also means you can’t select, copy, or interact with the text like normal.
But you can add a similar effect to your site if you use it for a logo or another non-interactive page element.
3. Twisted Letters
Developer Mamun Khandaker put together this collection of twisted letter animations. Each animation style has a different name and you can browse through them all in this one pen.
I could see these text effects used on landing pages or homepages for a tool/webapp. These immediately grab attention and they leave a lasting impression on the visitor. Plus they’re all made with 100% pure CSS and super easy to tweak.
4. Pixel Alphabet
This unique animated pixel effect is definitely strange, yet oddly mesmerizing. It relies mostly on JavaScript and was created by developer Georgi Nikoloff as a way to play with the HTML5 canvas element.
It uses Noto Serif as a font base and converts letters into malleable elements inside the canvas element. JavaScript breaks up the letters into smaller dots and these form the basis of the animation.
I can’t say this would have much practical use but it’s a testament to how far web animation has come.
5. Typing Carousel
This effect is notoriously popular on small portfolios and agency websites. The typing text animation often appears in a site’s header and it mimics the look of someone typing in a word processor.
Everything is contained inside one element with a good mix of CSS and JavaScript animation. Sometimes you’ll see websites use this to list descriptions of their work, or their history, or clients they’ve worked with.
It’s definitely a fun effect when used in moderation. Since only one word is visible at a time it does limit the readability of the page, but when used sparingly this is a very cool effect that anyone can copy.
6. Tyger Tyger
Borrowing words from the William Blake poem “The Tyger”, this very unique animation by Joseph Martucci really grabs your attention.
The focus here is not so much on the content, but rather on the typographic styles and animations. Each “segment” of the text has its own style with text outlines and glowing effects. It’s a great example of how you can style a homepage to animate text sequentially using setTimeout().
7. Snap SVG
The open source Snap.svg library lets anyone create high-resolution SVG images with just a bit of code. This is far easier than learning a program like Illustrator and it lets you animate just like this fun example created by Alexis Blondin.
All the letters are created dynamically through JavaScript including the random characters used in the animation. Modern SVG support is huge and these image types can radically change how we build websites in the coming years. This Snap.svg animation is just one example and it’s definitely a cool one.
8. Bracket Animation
Here’s another fairly common text animation technique which I see all the time. It uses brackets with rotating text almost like a rolodex on the page.
This animation mimics the typing carousel effect I mentioned earlier, except this can be made with just CSS. It relies on a custom looping animation that moves from one CSS keyframe to another, each frame displaying a different word or phrase in the rotating text.
I find this effect much subtler and easier to read on a homepage. If you’re looking for some cool text effects for your homepage this would be an excellent choice.
9. Unbreakable Kimmie Schmidt
This sweet logo effect was borrowed from the Netflix series “Unbreakable Kimmie Schmidt”. Everything is created with CSS including the text styles and the custom animations.
The page body has a class which initiates the animation, and this class is appended to the page using JavaScript. From there it’s all pure CSS. It mostly uses a bunch of transforms to create the surprisingly realistic bouncing effect.
It’s yet another example of how much CSS3 can do if you know how to use it.
10. Filling SVG Text
Lastly we come to this very unique SVG filler animation using a mix of box shadows and the CSS stroke property.
This text is built entirely with SVGs but it’s also selectable so you can copy/paste letters like regular text. It’s fully compliant with all browsers and the animation is subtle enough that it could fit into any website.
All of these text animations bring something new to the table. You may not find them all practical or usable in your own work, but they prove almost anything is possible with the right approach.
The post 10 Amazing Animated Text CSS & JavaScript Code Snippets appeared first on Speckyboy Design Magazine.