flight of phrase - typanimation for your website

Flight of Phrase is a jQuery plugin authored by Rocco Tripaldi. It sends a character, word, or phrase flying across your website.

Flight of Phrase is free to use, modify, or distribute under the GNU General Public License. But if you've enjoyed using it, please feel free to buy Rocco something from his Amazon wish list.

You should find all you need to use this plugin right here, but if you have any questions or issues, please post them on GitHub.

Try It

Go ahead, Send it flying

 

Using Flight of Phrase Options

Create a CSS class to style your flying phrases.

.flying {
	color: #8fc73c;
	font-size: 18px;
	text-shadow: 0px 0px 4px #000;
}

Format your HTML.

<p><span id="flying">How awesome are you?</span></p>

Initialize Flight of Phrase via jQuery.

$(document).ready( funtion() {
	$("#flying").Fop({
		"phrase_class" : "flying",
		"animation_type" : "chaos",
		"phrase" : "Mega&nbsp;Awesome!",
		"duration" : 2000,
		"density" : 4
	});
})

Try It

How awesome are you?

 

Using Flight of Phrase Methods

By default, the flight begins when someone clicks the element. You may want to start the flight only when certain conditions are met. In this example the flight will begin only if someone types "love" in the text field. We acheive this by using the click_to_start option and the start method.

Here's the HTML

<p>Type "love", click "Go".</p>
<p><input type="text" name="fop_challenge" id="fop_challenge" /></p>
<p><input type="button" value="Go" id="fop_challenge_button" /></p>

And the jQuery

$(document).ready( funtion() {
	$("#fop_challenge_button").Fop({
		"phrase_class" : "love",
		"phrase" : "&hearts;",
		"click_to_start" : false // <-important
	});
	
	$("#fop_challenge_button").click(
		function() {
			var the_text = $("#fop_challenge").val();
			if( the_text == "love" ){
				$("#fop_challenge_button").Fop("start");
			}
		}
	);
})

Try It

Type "love", click "Go".

 

Using Flight of Phrase Events

You can use the fop_complete event to do something after the flight animation is done.

$(document).ready( funtion() {
	$("#rain").Fop({
		"phrase_class" : "rain",
		"phrase" : "$",
		"animation_type" : "rain",
		"density" : 16,
		"duration" : 2000,
		"fop_complete" : function() {
			alert("You are all wet");
		}
 	});

Try It

Make it RAIN!

 
Options
Variable Default Value Accepted Values
phrase flightOfPhrase Any string
animation_type origin_burst Any exitisting Flight of Phrase animation type: left, right, rise, rain, chaos, center_burst, origin_burst
phrase_class none A CSS class name (it is applied to the flying phrases)
duration 1000 Integer between 1000 and 5000 (miliseconds).
density 9 Integer between 4 and 40. This determines how many phrases get flung. Animation types center_burst and origin_burst do not respond to density.
click_to_start true Bolean true or false. If true, clicking the element will start the flight. If false, the flight will start only by calling the start method elsewhere in your script.
Methods
Method Name Usage
start This method triggers the flight after initialization. It accepts no arguments.
$("my_element").Fop("start");
Events
Event Name Usage
fop_complete Define on initialization:
$("my_element").Fop("phrase" : "my phrase", "fop_complete" : function() { alert ("done"); })

Or define after initialization:
$("my_element").on("fop_complete", function(){ alert("done"); })

Use the link on the right to download the latest, minified version of Flight of Phrase.

Go to GitHub to post a question, bug, idea, or to fork it.

If you've enjoyed using Flight of Phrase, consider buying Rocco a gift.