Raptorize: A jQuery Plugin

The Raptorize Kit

First things first, you need to download the Raptorize Kit. This kit has...

• An awesome Raptor Graphic
• MP3 and OGG audio files for the HTML5 audio on Webkit and Firefox
• Our jQuery Plugin which makes the magic happen
• The jQuery Library to make all the pieces work together
• An example HTML file that has all the initial setup pieces

Next, open the index.html file and click the button to activate a prehistoric beast. There you go!

The Code You Need

First let's attach the scripts and actiavte the plugin in the head of your document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>')</script>
<script src="jquery.raptorize.1.0.js"></script>
<script type="text/javascript">
     $(window).load(function() {
          $('.myButton').raptorize();
     });
</script>

The only piece that you need to know here is that you need an anchor or element with the class 'myButton'. And there you have it, you're done!

The Options

What's that? You want to be able to control the entrance handler? You can! Raptorize can be activated on a click event (that is the default and what we have hooked up above), a timer which just fires after the page is loaded, or the legendary Konami-Code. Our personal favorite is the Konami-Code (but it only works once per page load).

<!-- The options for this plugin -->
<script type="text/javascript">
   $(window).load(function() {
      $('.button').raptorize({
        'enterOn' : 'click', //timer, konami-code, click
        'delayTime' : 5000 //time before raptor attacks on timer mode
   });
});
</script>

Go ahead, try the Konami Code (↑ ↑ ↓ ↓ ← → ← → B A)

Technical Note: If you don't want to store the Raptor image and sound files in the same directory as your javascript you need just open up the plugin and edit the location of the assets in the first 2 variables in the code (raptorImageMarkup and raptorAudioMarkup).

Credit Where Credit is Due

While the awesomeness that is the Raptorize plugin is 100% original code, the idea of including a glorious raptor into a design is not. We owe credit to Phil Coffman and Noah Stokes for the raptor assets and the brilliance of adding a Raptor to a design.

Ways to Activate It

On the click of a button:

With the Konami Code (use keyboard):

Or on a page load timer: