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.

copytextpop-up

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

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

Format your HTML.

copytextpop-up

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

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

Initialize Flight of Phrase via jQuery.

copytextpop-up

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

$(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

copytextpop-up

<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>

<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

copytextpop-up

$(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");
            }
        }
    );
})

$(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.

copytextpop-up

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

$(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"); })`