Best jQuery Text Effect Plugins & Tutorials with Demo

Scrolling Letters Animation with Anime.js

Scrolling Letters Animation with Anime.js

A switching title effect where a fixed text element changes with an animation depending on the scroll position.Recently we’ve stumbled upon a really nice effect on Akademi’s website: the main title of the page moves along as one scrolls down and changes depending on the section that is currently in the viewport. We thought this would be an awesome effect to recreate and play with different animations for the text as it changes. For detecting when a certain section is entered, we use the Intersection Observer API. Note that the API is currently not supported in Safari.

Decorative Letter Animations with CSS & Anime.js

Decorative Letter Animations with CSS & Anime.js

Today we’d like to share some fun letter animations with you. The idea is based on Animography’s Dribbble shot “Us By Night” where various little shapes animate with some letters. We wanted to explore some similar animations using different typographies and shape effects. We are using anime.js for the animations and Charming for working with the words.

jTextEffect – jQuery Text Animation Effects

jTextEffect - jQuery Text Animation Effects

This plugins contains 15 text animation effects. The features are :

  • Can be used as a text slider
  • Simple, dynamic and easy.
  • Supported by all major browsers
  • Can be used as newsticker.
  • Effect can be applied on a single text.
  • easy to use.

LetterPic : jQuery plugin that Converts User’s Name to Userpic

LetterPic : jQuery plugin that Converts User's Name to Userpic

LetterPic is a small jQuery plugin that converts user’s name to userpic, using it’s initials.You can replace any html element with initials based userpic (e.g. George Yakovlev -> GA picture). Another way of using, is to replace broken images by letter userpic.

jQuery Bubble Text : Animated Text Effect Plugin

jQuery Bubble Text : Animated Text Effect Plugin

jQuery Bubble Text plugin introduces one animated way of changing text.

Moving Letters Animation Effect with AnimeJs

Moving Letters Animation Effect with AnimeJs

Here is a collection of some beautiful text letter animation effects with anime.js

Limit-Text : jQuery plugin will Truncate Text

Limit-Text : jQuery plugin will Truncate Text

This jQuery plugin will truncate text to a specified number of characters without splitting a word in half.

jQuery Blink Animation Plugin

jQuery Blink Animation Plugin

jQuery plugin to blink animation effect on any html element.

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.

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.