Best jQuery Text Effect Plugins & Tutorials with Demo

Text Styles and Hover Effects with CSS3 & SVG

Text Styles and Hover Effects with CSS3 & SVG

A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.

jQuery URL ColorUP in Textarea

jQuery URL ColorUP in Textarea

This jQuery plugin allows it to automatically highlight URLs in textareas like those on Twitter.

TextHoler.js : jQuery Image in Text effect Plugin

TextHoler.js : jQuery Image in Text effect Plugin

Use this jQuery plugin to make your text like a hole in the page.

Embed-js : jQuery plugin for Automatic Media Embedding system

Embed-js : jQuery plugin for Automatic Media Embedding system

A jQuery plugin for converting text emojis into image-based emoticons, also supporting an automatic media embedding system for multimedia URLs (earlier emoticons-js).

  • Converts emoticon text codes into emoticons :smile: , :heart:
  • Finds links in text input and turns them into html links.
  • Youtube and Vimeo video embedding with video details fetched from the api.
  • HTML5 player supported media embedding (mp3,mp4,ogg)
  • PDF viewing with preview and then the actual pdf in a frame.
  • Inline Code Syntax highlighting (uses highlight.js)
  • Twitter tweet embedding supported
  • Codepen, jsbin,ideone, jsfiddle and plunker embed supported
  • soundcloud and spotify support
  • Twitch tv, dotSub, dailymotion, vine,TED and liveLeak support.
  • Google map location embed

CSS3 Hover Link Effects

CSS3 Hover Link Effects

One of the essential parts of a website is a text link. By clicking an anchor tag you can go anywhere from the site as it points to a specific page.

Today, We are going to show you how to create awesome links using new features of CSS3: transition and transform. At the end of this tutorial you’ll have cool link hover effect that will surely rock your navigation.

Birdman.js : jQuery Animate Text Plugin

Birdman.js : jQuery Animate Text Plugin

A jQuery plugin to animate text as in the credits of the 2014 movie “Birdman”.

Animated Text Fills with CSS3 & SVG

Animated Text Fills with CSS3 & SVG

A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.

In this article I’m going to share my experiments and five ways to create patterned filled text. In three out of these five cases we will retain the ability to select the text. Of course we’d like to have that for every case but with some workarounds we can solve this problem, too.

Reveal-it.js : jQuery Animated fade-in Text effect

Reveal-it.js : jQuery Animated fade-in Text effect

Reveal-it.js is a jQuery plugin that gradually reveals text from left to right to produce a fade-in effect.

CharCycle : jQuery Cycling Effect Text plugin

CharCycle : jQuery Cycling Effect Text plugin

A jQuery plugin to create a cycling effect on selected text at some event.Attach the plugin to the element you want to trigger the cycling, specify the target text you want to produce the effect and include a conditional statement to ensure that cycling isn’t re-triggered while the effect is in progress.

Textroll.js : jQuery Animated Text Effect Plugin

Textroll.js : jQuery Animated Text Effect Plugin

Textroll.js is a jQuery plugin for adding some scroll effect to text.



Best jQuery websites design awards