Monthly Archives: August 2011

Perchar Text animations with JQuery

It might be a few years late. It might not be cool anymore. However, it is better to show up late to the party than not at all. Right? That being said I have made my first JQuery plugin. You are probably thinking great… another stupid useless Jquery plugin. And you are probably right. However, for that small chance you were wanting to do per character text animations with CSS3 transitions this is YOUR plugin! COOLNESS.

Example

Check out an example of the plugin here. EXAMPLE

Breakdown

The first thing we need to do is include jquery and the perchar plugin.

Next, we need to add a header tag to use.

Lastly, we will need to setup the JavaScript for the perchar animation.

Let’s break down this simple example. First we are going to cache the selector to our h1 tag in a variable for later use. Next we are going to set the start and end parameters for the animation. In this case we are starting with a top position of 70 and animating it up to 0. We are also setting opacity to 0 and fading into 1.

To initialize the perchar effect we need to call the perchar method and pass it three parameters. Start, End, and Break Method. Start and end are the css variables we have defined above. Break method refers to how we want the title to break. We have 3 options. words, lines, and letters. As you can see from our example we are choosing to break by words.

The last thing we need to do is activate the animation. To do this we call the animatePerchar method and pass 3 parameters. Duration, Easing, Break Delay. Duration is how long we want the whole animation to last. (In seconds) Easing accepts 3 types. bounce, linear, and swing. Finally, the delay parameter controls how much delay you want between each letter or word or line animation.

Crazy Example

The above is pretty cool for static animations where we know the properties ahead of time. What if we wanted to make some of the properties dynamic? Say take a random number and animate that. Let’s take a look at the explode example.

Let’s break down the above. First off we are caching the selector. Then again we set our start and end variables. This time if you notice we have a funny dollar sign and curly braces around portions of javascript. Ex. ${JS Statement inside} These sections are acting like jQuery templating and will execute the JavaScript statements when the animation is initialized. This gives us the ability to put dynamic values in our start and end css properties. Pretty neat! The perchar and animatePerchar method calls are the same as in the previous example. However, there is on small difference. The animatePerchar delay is set to 0 which will make all the letters animate right away.

Conclusion

Well that’s it. My first jQuery plugin. Feel free to let me know what you think or complain if you hate it.

The jquery.perchar code is up on github for those interested in forking it and making it uberawesome. Fork me on Github