Best jQuery Text Effect Plugins & Tutorials with Demo

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.

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.

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.

Adapttext.js : jQuery Responsive Text Plugin

Adapttext.js : jQuery Responsive Text Plugin

Adapttext.js is a dependency free and simple javascript solution capable to fit your text inside the parent element.

It calculates the maximum font-size possibile in order to keep the text’s width and height inside the parent.

It’s very useful in responsive situation and where we don’t know in advance the text’s length (text pulled from a CMS?). It is also very handy when we need to display text along an image and we want to avoid overlaps.

Webfonts : jQuery based Webfonts Library

Webfonts : jQuery based Webfonts Library

jQuery WebFonts extension adds font embedding capability to jquery using the WebFonts technology. The extension provides a flexible way to choose font from a font repository and apply on html elements.

Features:

  • Flexible font repository. The extension can work with any font repository file system.
  • Provides many APIs to customize and extend.
  • Applies font based on the html lang attribute of the elements
  • Make sure the font defined using font-family style for any elements, either using inline css or external css’ available for the reader without any extra code.

Typr.js : Process Fonts in Javascript

Typr.js : Process Fonts in Javascript

Typr.js is a font processor for JavaScript. It’s light, small, and ultra fast.Typr.js is a Javascript parser and utility for working with fonts (TTF, OTF). It is an alternative to opentype.js. It is the main text engine for Photopea image editor.

  • light and small (60 kB unminified uncompressed, 4x smaller than opentype.js)
  • ultra fast (2x to 5x faster parsing than opentype.js)
  • successfully parsed more than 2000 fonts (opentype.js had problems with many of them)
  • simple structure and easy to extend

baffle.js : JavaScript library for Obfuscating & Revealing Text

baffle.js : JavaScript library for Obfuscating & Revealing Text

A tiny javascript library for obfuscating and revealing text in DOM elements.

Typography.js : JavaScript Toolkit for Beautiful Typography

Typography.js : JavaScript Toolkit for Beautiful Typography

A powerful toolkit for building websites with beautiful typography.Typography.js provides a vastly simpler way to define and explore typography designs.

You provide configuration to the Typography.js JS api and it uses its Typography engine to generate CSS for block and inline elements.

Dropcap.js : CSS Drop Caps made easy with JS Library

Dropcap.js : CSS Drop Caps made easy with JS Library

Dropcap.js makes beautiful drop caps easy for the web.

TypeWriting.js : JavaScript Library for Typewriter Effect

TypeWriting.js : JavaScript Library for Typewriter Effect

Typewriting js is a javascript library that make the typewriter effect.



Best jQuery websites design awards