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 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" : "♥", "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.