Raptorize: A jQuery Plugin

We've All Been Here Before...

You're sitting at your desk, coding up a 500 page site, knee-deep in Extreme Cheddar Doritos sipping on a liter of Code Red Mountain Dew when you realize...this page would be:

You immediately scramble home to grab your Jurassic Park DVDs so can screencap a Velociraptor attack, but then you realize how hard it would be to make an awesome raptor run across the site you were coding. Plus, how are you going to get that trademark velociraptor screech? How about we let you in on a little secret?

We already did it.

The Raptorize Kit

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

• An awesome Raptor Graphic courtesy of www.raptorize.com
• 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:

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

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.