Best jQuery Text Effect Plugins & Tutorials with Demo

    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

    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.