Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

Responsive Text Effects - Media Overlays

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

Responsive Text Effects - Media Overlays - CodeCanyon Item for Sale


Ad: Bluehost hosting

Visual Builder the Text The SKY Ire Iim iSet Font Une Font Family View Source Background

A long time ago …

In the dark ages of the internet, there were just 3 fonts and 12 colors to pick from for all your web design. Times were tough, but people had to just get by and make do with blinking text and cheesy Giff animations. Luckily, things slowly got better. The number of web-safe colors and fonts increased, and then cufon and sifr came along. Suddenly, with just a little bit of of JavaScript or Flash wizardry, these tools allowed websites to pick and use any font they pleased, and there was rejoicing and jubilation in web-designer land. But even greater things were yet to come, in the name of CSS3 and HTML5, which not only standardized the use of custom fonts, but brought many other goodies like native video playback, canvas, audio and SVG.

And today, we’re happy to present to you the next step in the march towards more beautiful text and typography for the web: Responsive Text Effects. This takes web typography to a whole new level, as you are no longer limited to using just one flat color for HTML text blocks, but any image or video file you want. The image or video overlays can be further enhanced with drop shadows and text outlines of any color and size. Add to this the ability to work with HTML5’s custom fonts, including popular icon fonts like fontawesome, and the possibilities of what can be done with this are endless, limited only by the imagination. We’ve assembled a few examples to set the ball rolling, so please have a look at the live preview.

The script work much in the same way as cufon does, by taking text and transforming it into a live image using the canvas tag, that flows and responds to its containers size just like normal text would. The download package includes a specially made effects editor and generator called the Visual Builder. Use it to quickly tweak and create your text effects, without having to hand-code the Javascript configuration settings. The visual builder includes 7 custom fonts and over 30 images and video files that you’re free to use in your own designs. It is also fully customizable and well documented.

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


23 April 13

Last Update:
23 April 13

Compatible Browsers:
IE9, IE10, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS

Software Version:


eCommerce, All Items, html5 canvas, html5 video, image effects, jquery text effects, media, Media Overlays, responsive text effects, text effects, text styling, video effects