Best jQuery Text Effect Plugins & Tutorials with Demo

LuminJS : JavaScript library to Progressively Highlight Any Text

LuminJS : JavaScript library to Progressively Highlight Any Text

LuminJS is a JavaScript library to progressively highlight any text on a page.Great for when you want users to pay attention to some important text.
It can also be used to show progress of a task − Read something while tasks are being completed.

t.js : jQuery Hypertext Typewriter Plugin

t.js : jQuery Hypertext Typewriter Plugin

t.js is a lightweight jQuery hypertext typewriter plugin.

T-Writer.js : JavaScript Native Typewriter Effect

T-Writer.js : JavaScript Native Typewriter Effect

T-Writer.js is a JavaScript native typewriter effect, without compromises or dependencies.

Creating a custom typewriter effect can be cumbersome and time consuming. However, most of the libraries out there are either slow, bloated with dependencies, or lacking in functionality.

T-Writer.js was designed to provide maximum flexibility and usability, while remaining fast and dependency free.

Rotator : jQuery plugin for Rotating Text & Words with CSS3

Rotator : jQuery plugin for Rotating Text & Words with CSS3

Rotator is a lightweight and customizable jQuery plugin for rotating text and some words of your text with awesome CSS3 animations.

Splitting : JavaScript microlibrary to Split an element by Words & Characters

Splitting : JavaScript microlibrary to Split an element by Words & Characters

Splitting is a JavaScript microlibrary to split an element by words, characters, children and more, populated with CSS variables!

Most Splitting methods utilize a series of <span>s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS.

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.