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'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:

So much more awesome with a velociraptor.

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:

<script src="http://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.

Copyright ZURB, freely available for distribution under the MIT license.

Download the Kit

Score an awesome product engineering or design job

via Job Board from ZURB

Ways to Activate It

On the click of a button:

Make a Raptor Pwn My Screen

With the Konami Code (use keyboard):

↑ ↑ ↓ ↓ ← → ← → B A

Or on a page load timer:

Reload Page With Timer

Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×