-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathjquery-airport.html
1 lines (1 loc) · 7.89 KB
/
jquery-airport.html
1
<html style="background:url(assets/images/bg.png) repeat" class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"><!--<![endif]--><head> <title>jQuery Airport | Sean Coker</title> <!--[if lt IE 8]> <![endif]--> <meta charset="utf-8"><link type="text/css" href="assets/css/espresso-libre.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="assets/css/projects.min.css"><link rel="stylesheet" type="text/css" href="assets/css/jquery-airport.min.css"></head><body style=""> <span id="forkongithub"><a href="https://github.com/okcoker/jquery-airport" target="_blank">Fork me on GitHub</a></span> <div class="nav_container active"> <nav id="nav" class="container" role="navigation"> <a href="/" class="gravatar_link"><img src="/assets/images/gravatar.jpeg" alt=""></a> <div class="links"> <a href="/" class="">Home</a> <a href="/building" class="">Projects</a> <a href="/#contact">Contact</a> </div></nav> </div><div class="container project_container"> <a href="http://sean.is/building">← Back to all projects</a></div><section id="wrapper" style="min-height: 128px; "> <header> <h1>jQuery Airport</h1> <p>Lightweight Text Effect. (0.7kb)</p></header><div class="project" role="main"> <header> <div class="twitter_buttons"> <a href="https://twitter.com/okcoker" class="twitter-follow-button" data-show-count="false">Follow @okcoker</a> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://sean.dev/building/jquery-airport" data-via="okcoker" data-lang="en" data-text="Check out jQuery Airport" data-hashtags="javascript,jquery,texteffect">Tweet</a> </div> <a href="https://github.com/okcoker/jquery-airport" class="btn">Github</a> <a href="/projects/jquery-airport.zip" class="btn" download="jquery-airport.zip">Download</a> </header> <section> <article class="block"> <h4 class="example example1"><span class="c0">F</span><span class="c1">i</span><span class="c2">r</span><span class="c3">s</span><span class="c4">t</span><span class="c5"> </span><span class="c6">d</span><span class="c7"></span><span class="c8"></span><span class="c9"></span></h4> </article> <article class="block"> <h6>HTML:</h6> <pre data-language="html"><h4 class="example1"></h4> </pre> <h6>Javascript:</h6> <pre data-language="javascript">$(".example1").airport([ "First word", "2nd Word", "And third" ]); </pre> <p>The simplest way to use jQuery Airport is to just call the function on your selected element and pass it an array of words as shown above. The element can contain a word or just be left empty.</p> </article> </section> <div class="ad"> <style scoped="scoped"> .ad { min-height: auto !important; height: auto !important; margin-bottom: 20px !important; background: #000 !important; } .ad ins { margin: 0 auto !important; display: block !important; } </style> <!-- airport --> <ins class="adsbygoogle" style="display:inline-block;width:320px;height:50px" data-ad-client="ca-pub-6677898159048024" data-ad-slot="6948635401" data-adsbygoogle-status="done"><ins style="display:inline-table;border:none;height:50px;margin:0;padding:0;position:relative;visibility:visible;width:320px;background-color:transparent"><ins id="aswift_0_anchor" style="display:block;border:none;height:50px;margin:0;padding:0;position:relative;visibility:visible;width:320px;background-color:transparent"><iframe width="320" height="50" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){w.location.replace(h)}}" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;"></iframe></ins></ins></ins> </div> <section> <article class="block"> <h4 class="example example2"><span class="c0">C</span><span class="c1">o</span><span class="c2">l</span><span class="c3">o</span><span class="c4">r</span><span class="c5">s</span><span class="c6">a</span><span class="c7"></span><span class="c8"></span><span class="c9"></span><span class="c10"></span><span class="c11"></span><span class="c12"></span><span class="c13"></span><span class="c14"></span><span class="c15"></span><span class="c16"></span><span class="c17"></span></h4> </article> <article class="block"> <h6>HTML:</h6> <pre data-language="html"><h4 class="example2"></h4> </pre> <h6 style="display:inline-block;">CSS:</h6> <small style="position: relative;top: -2px;">(prefixes left out for brevity)</small> <pre data-language="css">.example2 { transition: color 0.5s ease-in;} </pre> <h6>Javascript:</h6> <pre data-language="javascript">var words = [ "Colors", "can", "be", "really really cool" ];var colors = "#AAFF12, #FF9712, #12FFF6, #FF1271, #FFEC12";$(".example2").airport(words, { fill_space: true, colors: colors}); </pre> <p>I've found that when using airport with text that is centered, the <code>fill_space</code> option might provide unwated results. You can see from this example the <code>fill_space</code> option fills in all the spaces of the previous word. By using a combination of the provided <code>colors</code> string and a little bit of css magic, we can achieve a smooth fade between color changes.</p> </article> </section> <section> <article class="block"> <h4>Options</h4> <div class="option"> <p>transition_speed: <code>[Number=1000]</code></p> <p>The time in ms before switching to the next word.</p> </div> <div class="option"> <p>loop: <code>[Boolean=true]</code></p> <p>Choose whether to stop at the end of your array values or keep looping through.</p> </div> <div class="option"> <p>fill_space: <code>[Boolean=false]</code></p> <p>Puts spaces (nbsp) after shorter words within your list to fill in space of your longest word. (If your words are "One, Two, Three," "One" and "Two" will be written as "One " and "Two ")</p> </div> <div class="option"> <p>colors: <code>[String=null]</code></p> <p>List of comma separated colors to randomly color your values i.e. '#b5c523,#E7860E'</p> </div> </article> </section> <section> <article class="block"> </article> </section></div></section><footer id="footer"> <div class="container"> <small class="full text_center">© 2013 Sean Coker</small> <small class="full text_center">Some, if not all and/or most rights reserved.</small> <small class="full text_center">This site is in progress but you can contact me <a href="http://seancoker.com/talk/">here</a></small> </div></footer> <script src="assets/js/jquery-1.10.1.js"></script><script src="assets/js/rainbow-custom.min.js"></script><script src="assets/js/jquery.airport.min.js"></script><script>$(function(){$(".example.example1").airport(["First word", "2nd Word", "And third" ]);$(".example.example2").airport([ "Colors", "can", "be", "really really cool" ], {fill_space: true, colors: "#AAFF12,#FF9712,#12FFF6,#FF1271,#FFEC12"});});</script></body></html>