Best jQuery Text Effect Plugins & Tutorials with Demo

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.

Visual Type Scale Calculator with jQuery

Visual Type Scale Calculator with jQuery

Type-scale is a visual type scale calculator.

Long Shadow jQuery Plugin

Long Shadow jQuery Plugin

Easy Text-Shadow with Long Shadow jQuery Plugin.



Best jQuery websites design awards