Contents
- Slider 28
- Ergo 7 Transparent Text Slider, Contact Form, 404 Page, With CSS3 and SVG
- jQuery Text Animation
- jTicker Typing Text Effect using jQuery
- Grab bag, jQuery text effects
- TextFX – A jQuery Text Animation Tool
- Fade Colors Using jQuery
- jQuery Approach
- AutoCompleter
- Simple jQuery Text Resizer
- Zooming with jQuery
- 17. Text-shadow in IE with jQuery
- 18. jQuery Label Effects
With jQuery text effects you can do really cool and dynamic stuff on your web pages.
However keep in mind that text effects in web design is far away from the popularity we saw in the early days of the Internet and in some cases can be best used as funny JavaScript effects. Back then text usually was flying around (just because it could),
it was changing colors in rainbow style etc. And then of course placed next to a few ugly, intense colored animated icons and other examples of pixel art.
Today some cool jQuery text effects can still be useful when used right and often they are also simple to install and use. This article is a roundup of the jQuery text effects you can use in your web development or just check out to be inspired. Keep in mind though that the trend goes towards creating HTML5 canvas animations and text is not the only element to play around with.
A really popular type of jQuery plugins are jQuery Slider or jQuery Carousel plugins typically used for showcasing featured content and products.
Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.
Slider 28
This is actually a collection of text, video and image sliders to help you present content in a much decent manner. All in all, there are 28 sliders that are included with the package. Every slider is entirely independent from the others. You will find that every slider has a unique CSS file contained in the CSS folder.
To make it easy for you to use each slider, a manual for each item is included with the package. The manual can be found in the example page for every slider.
All of the 28 sliders included with this pack is made with jQuery, CSS and HTML. Every slider takes data from an external XML file. Majority of the settings found in each slider can be customized with only minor changes in CSS, the variables contained in the variable .js file and the value in config XML file. Actually you will only copy paste. In the case of popups, you can change some of the vital settings from config.xml.
Ergo 7 Transparent Text Slider, Contact Form, 404 Page, With CSS3 and SVG
This plugin is a transparent text effect slider that is incorporated with custom effects. Ergo 7 include a transparent text slider, transparent video background, transparent text contact and transparent text 404. The slider with transparent text uses SVG as well as the 404 page with transparent text and the contact form with transparent text. This extension also has a transparent video background.
Transparent Text Slider, Contact Form, 404 Page, With CSS3 and SVG features responsive layout and Google Fonts. Documentation is included with the theme package. A demo page for each Ergo 7 style is available. To see each of them and to know how you can benefit from this plugin, visit the demo page by clicking on the product link I have included above.
jQuery Text Animation
Text Animation plugin lets you to add to any text specified text animations e.g random_explosion, random_implosion, sinusoid.
MORE INFO / DEMO by Codecanyon (premium plugin)
jTicker Typing Text Effect using jQuery
jTicker is a jQuery plugin that can be used for creating text effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text. But should be used wherever necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.
Grab bag, jQuery text effects
With grab bag jQuery plug-ins, you can have different effects to the text.
TextFX – A jQuery Text Animation Tool
TextFX is a jQuery text animation tool for animating a single line of text
Fade Colors Using jQuery
This tutorial will explain how to fade a color in array of elements using jQuery
jQuery Approach
Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object. It works in a very similar manner to jQuery animate. However it animates over distance instead of time.
AutoCompleter
With autocompleter, your site becomes more user friendly by providing suggestions when a text is entered.
Simple jQuery Text Resizer
Simple jQuery Text resizer adjusts the size of your text for easier readability by clicking the icon.
Zooming with jQuery
This effect allows the reader to zoom the text for better reading.
17. Text-shadow in IE with jQuery
Most of major browsers support text-shadow, yes, you guessed it, IE doesn’t. This handy jQuery plugin helps you get around that.
A handy little thing of Internet Explorer is that it gives you access to CSS declarations it does not understand, so this plugin simply requests the text-shadow value of a given element and processes that.
18. jQuery Label Effects
The Label Effects is a plugin that can apply highlight and shadow effects to anything that contains text. Several preset effects can be invoked via a single option that provides values for most of the other settings, they are: Raised, Sunken, Echoed, Floating and Shadow.
[exec]echo get_avatar( get_the_author_email(), ’80’ );[/exec]
Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.
jTicker Typing Text Effect using jQuery reminds me of the green good old days when everything was much simpler. Black and green writing Basic.
I can think of some ways to use this. Thanks for sharing!
Smooth, nice and smooth.
i like this Simple jQuery Text Resizer.. awesome collection.. but this is not free…
this is awesome collection… thanks mate for sharing… 🙂
Cool effects 🙂
Good work… thanks for sharing 🙂
awesome effects, i was searching for jquery, thanks mate for sharing all those jquery effects.
You might also be interested in this jQuery plugin I put together for doing title sequences like in a movie: http://grantm.github.com/jquery-title-sequence/. I’ve primarily used it for animating text with fades, wipes and scrolls.
This is great. thanks
HTML5 Rocks!!!, It helped me a lot to do amazing things on my websites as well.
amazing! i found what i was searching… long life to html5 and javascript 😉
This is great. It helped me achieve some decent text effects
thanks, that’s good
I miss the fun in a lot of the internet today! Though I am liking the resurgence of Javascript in conjunction with html5 and css3 to develop the aesthetics of the web.