jQuery Plugin Directory

Letter Effects and Interaction Ideas with CSS

Letter Effects and Interaction Ideas with CSS

Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters. We use some modern CSS properties like CSS Grid and CSS Variables in the demos, so please view them with a capable browser.

animation
css3
Core Java Script
CSS2
0
Text Effect

jQuery Per Word Action Plugin

jQuery Per Word Action Plugin

A jQuery plugin utility which idempotently wraps every word within an element in a unique span and assigns each word a line-number data attribute. Takes a per-word callback function as an argument.

Text Effect

jQuery Pull Quote Center Plugin

jQuery Pull Quote Center Plugin

A jQuery plugin utility which dynamically inserts a symmetrical pull-quote element clone to enable a hacky float: center between two columns of text.

Text Effect

hrStringColor : Set Color on Seperate Characters in string

hrStringColor : Set Color on Seperate Characters in string

hrStringColor is a jQuery plugin to set color on seperate Characters in string.

Text Effect

iTyped : Dead simple Javascript Animated Typing

iTyped : Dead simple Javascript Animated Typing

iTyped is a dead simple Javascript animated typing, with no dependencies. iTyped has a tiny size and easy to use.

animation
Core Java Script
Text Effect

CSS Animated Letters Effect

CSS Animated Letters Effect

Short and funny phrases using CSS3 to make the animation.

animation
Text Effect

Create CSS Glitch Effect with CSS

Create CSS Glitch Effect with CSS

In this tutorial we will recreate a simple glitch hover effect using pure CSS.

animation
css3
CSS2
0
Text Effect

Shave.js : JavaScript plugin that Truncates Text

Shave.js : JavaScript plugin that Truncates Text

Shave is a zero dependency javascript plugin that truncates text to fit within a html element based on a set max-height.

Core Java Script
Text Effect

Inspiration for Letter Effects with Anime.js

Inspiration for Letter Effects with Anime.js

Today we’d like to share some inspiration for letter effects with you. We wanted to explore some simple, creative animations for display typography and large headlines using anime.js. These kind of animations can really enhance a certain message; combining these effects with a fitting font and playing with transforms opens up a huge range of possibilities. We hope this set inspires you and gives you some ideas on how to use an animation library like anime.js for this purpose.

animation
Core Java Script
Text Effect

Fancy SVG Letter Animation

Fancy SVG Letter Animation

Today we’d like to show you a fancy little lettering animation made with SVG and anime.js. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” Skillshare class by Jamie Bartlett. While we didn’t do any shading, we wanted to animate the stroke of each letter multiple times to achieve a similar effect.

animation
SVG Tutorial
Text Effect