Skip to content

Instantly share code, notes, and snippets.

@orlandohohmeier

orlandohohmeier/airportwriter.js

Created June 30, 2011 17:14
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save orlandohohmeier/1056686 to your computer and use it in GitHub Desktop.
Save orlandohohmeier/1056686 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Plugin for an airport typewriter effect.
Raw
airportwriter.js
/**
* airportwriter v0.0.1
*
* @description jQuery Plugin for an airport typewriter effect.
* This is the very first time i've wrote a jQuery Plugin. So, if you know some way, to improve it, i'm pleased to hear from you.
*
* @author Orlando Hohmeier http://orlandohohmeier.com
*
* @license This work is licensed under a Creative Commons Attribution 3.0 Unported License. http://creativecommons.org/licenses/by/3.0/
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
* BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
* DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
*/
(function($){
$.fn.extend({
airportwriter:function(options) {
var defaults = {
speed:100,
complete: null,
chars : 'QWERTZUIOPASDFGHJKLYXCVBNM0123456789',
num : 0
}
var options = $.extend(defaults, options);
return this.each(function() {
var item = $(this);
var text = item.html().match(/(\<\/?[^>]*\>)|(&\w*;)|(.)/g).reverse();
var characters = options.chars.split('');
var c = 0, i = 0;
var interval = parseInt(options.speed/jQuery.fx.interval);
var steps = text.length;
var e = new jQuery.fx(this, {});
e.step = function(gotoEnd) {
if(++c == interval || gotoEnd){
this.update();
c = 0;
i= text.length;
steps = (gotoEnd)? 0 : steps;
var tmp = '';
while(--i>=((options.num == 0)? 0 : ((steps-options.num >= 0)? steps-options.num : 0))){
if(i>=steps){
tmp += text[i];
}else{
if(text[i].match(/\W/g)){
tmp += text[i]
}else{
tmp += characters[parseInt(Math.random()*characters.length)];
}
}
}
item.html(tmp);
if(--steps<0){
if(options.complete){
options.complete.call(item);
}
return false;
}
}
this.update();
return true;
}
e.custom( steps, 0, '');
});
}
});
})(jQuery);
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<title>airportwriter</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="https://raw.github.com/gist/1056686/95e5673006c220ece43cdfd879f3e87662f84b70/airportwriter.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono&v1' rel='stylesheet' type='text/css'></link>
<style type="text/css">
body {
color: #fff;
background-color: #333;
font-family: 'Droid Sans Mono', arial, serif;
}
</style>
</head>
<body>
<h1>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</h1>
<h2>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</h2>
<h3>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</h3>
<h4>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</h4>
<p id="p1">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT<br>
LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS<br>
NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT<br>
ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR. EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT,<br>
SUNT IN CULPA QUI OFFICIA DESERUNT MOLLIT ANIM ID EST LABORUM. 0123456789</p>
<p id="p2">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT<br>
LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS<br>
NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT<br>
ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR. EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT,<br>
SUNT IN CULPA QUI OFFICIA DESERUNT MOLLIT ANIM ID EST LABORUM. 0123456789</p>
<script type="text/javascript">
$(document).ready(function(){
$('h1').airportwriter({speed:50,num:0,complete:function(){/*complete h2*/}});
$('h2, h4').airportwriter({speed:70,complete:function(){/*complete h1/h4 */},chars:'QWERTZUIOPASDFGHJKLYXCVBNM'});
$('h3').airportwriter({speed:100,num:2,complete:function(){/*complete h3*/},chars:'QWERTZUIOPASDFGHJKLYXCVBNM#+-0123456789'});
$('#p1').airportwriter({speed:30, chars:'_'});
$('#p2').airportwriter({speed:30, num:3});
})
</script>
</body>
</html>
@remaerd
Copy link

remaerd commented Sep 11, 2011

Thanks for this code! It's really useful! I think this jQuery plugin is better than those existing Type Writer Plugins. The result is really stunning.
In the same time. There's some problems appeared when I decide to use it: When the Animation come to an end. the object (in my case, a link) couldn't respond to any other code I write. In the other hand. This plugin is lack of "hide" effect.
I'm not a good js programmer as you do. If you saw this comment, Please fix the losing respond problem I mention above. It's mean a lot of me. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment