Raptorize: A jQuery Plugin
An awesome jQuery plugin that unleahes a Raptor of Jurassic proportions...
Well, technically it's Cretaceous proportions, but we'll let that slide for now.
We've All Been Here Before...
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!
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)
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.
Download The Kit
Copyright ZURB, freely available for distribution under the MIT license.