Creating funnyText.js plugin for jQuery

funnyText

View demo

I introduce today funnyText.js! The plugin to create funny texts effects for your texts. Ideal for titles, it is a great way to give your site a touch of life in a simple and smart way.

I implemented something quite similar a few months ago for a site and yesterday afternoon I decided to turn it into a plugin. It was not straight forward, few months ago I made use of images for each letter as well as custom CSS styles specially designed for each letter size and position.

Now things are more simple. Easy to apply to different texts in the same page and with different options such as color, size, speed…

The plugin is now in Beta version. I will need more time to test it over different browsers, trying to make it work in old browsers and polish some details. Anyway, any feedback will be more than welcome.

Github

View demo

Creating a funnyText effect

All you need to do is including the js and css files and call the plugin inside a `$(document).ready` function using the selector
in which the text is contained.

$(document).ready(function() {
    $('.mySelector').funnyText();
});
  • MqxError Hnash

    thnx dude this plugin is absolutely amazing ๐Ÿ™‚

    • Alvaro

      Your welcome ! ๐Ÿ™‚ I hope you enjoy it!

  • vishal

    thanks nice one

    • Alvaro

      You’re welcome ๐Ÿ™‚

  • Hulyss Bowman

    Hello Alvaro !! very good plug-in but I have a little problem. When I launch my splash screen sometimes there is unusual spacings between letters… do you have an idea how to fix this ? Thank you very much.

  • Fabrizio Colavito

    Hi Alvaro, I like your plugin, i think is very nice, but I have a problem when I use it with several fonts of Google Fonts.. it seems like a bug about letter spacing.. You can see the result on this link: http://fabbryzz.it/test/funnytext.js/ ..can you help me?

    • Alvaro

      That’s because you are loading and external font and it is taking more time to load than the plugin to be applied.

      Instead of initializing the plugin on document.ready, do it on `$(window).load(function() {`.
      That will fix your problem.

      • Fabrizio Colavito

        Thanks a lot Alvaro! ..you’re great! ๐Ÿ˜‰

  • Sem Gebresilassie

    HI Alvadro, great plugin how can I make it responsive though? When screen is re-sized there is a very strange gap between texts. Is there a way to do that?

  • Awesome Plugin Alvaro. Going to use it for my webpage.

    Kind Regards
    advent

  • Muhammad

    It is an amazing plugin!