Best jQuery Text Effect Plugins & Tutorials with Demo

liike.js : Tiny JavaScript Tweening Library

liike.js : Tiny JavaScript Tweening Library

Liike is a Finnish word and means movementmotion. It’s a minimalistic library to create performant custom JS tweens no matter what you’re tweening.

When you create a tween, Liike will create a single render loop on-demand for every tweens running and use DOMHighResTimeStamp (provided by requestAnimationFrame), which should be accurate to 5 µs. If the delay is 0, Liike will start the tween at the next animation frame and count the duration from there.

Ideas for Proximity Feedback with Progressive Hover Effects

Ideas for Proximity Feedback with Progressive Hover Effects

Today we’d like to share some subtle proximity feedback ideas with you. We’re exploring a progressive hover effect which triggers not just when we are hovering an element but progressively, when we come close to it. There are several interesting use cases for this kind of effect and today we wanted to showcase some of them.

Fitty : Snugly Resizes Text to fit its Parent Container

Fitty : Snugly Resizes Text to fit its Parent Container

Scales up (or down) text so it fits perfectly to its parent container.Ideal for flexible and responsive websites.

Features:

  • No dependencies
  • Easy setup
  • Optimal performance by grouping DOM read and write operations
  • Works with WebFonts (see example below)
  • Min and max font sizes
  • Support for MultiLine
  • Auto update when viewport changes
  • Monitors element subtree and updates accordingly

Blotter.js : JavaScript API for Drawing Unconventional Text Effects

Blotter.js : JavaScript API for Drawing Unconventional Text Effects

Blotter.js is a javascript API for drawing unconventional text effects on the web.

Blotter provides a simple interface for building and manipulating text effects that utilize GLSL shaders without requiring that the designer write GLSL. Blotter has a growing library of configurable effects while also providing ways for student or experienced GLSL programmers to quickly bootstrap new ones.

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