Quake Text

An Ugly, Official Tutorial

QuakeText (or Quake) is a simple way to jumble up the text in particular elements, or across the board. Nothing fancy and complicated, but it's quick and it works! Simple jQuery-and-CSS-driven.

At any time while following along you can type into the text box to see the text update in realtime.
To start, get the jwQuakeText plugin jwquaketext.js (.min) | (.zip w/tutorial)

Next, link your files as always:

  <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type = "text/javascript" src = "js/jwquaketext.js"></script>
  <!-- Link to your own CSS. There is 1 definition that is required. -->
  <link rel = "stylesheet" type = "text/css" href = "path/to/your/style.css" />
(Important) Set the default CSS display behavior.
/* In your CSS */
.quake span.quake:nth-child(odd), 
.quake span.quake:nth-child(even){
	display: inline-block;	
	/*You may even want to add a little L/R margin spacing, too.*/

Create your div or span element with the quake class. NOTE: Only give the quake class to an element whose total text you want to change.
// All of the text in a single div
<div id = "defDisp" class = "quake">All of the text in here will quake</div>


// Certain key text in a paragraph
<p>Only pieces of this text will <span class = "quake">quake</span> today.</p>

In your script, call the quake() method for the elements using the quake class.
// A particular ID (that happens to have class quake)

// Everything with class quake

Default (Random)
This is quake by default. Random character angles. You can set the range of min and max with randomMin and randomMax.

No Random (using CSS)
You can turn random off and define the angles in CSS using :even and :odd selectors! 'Evens' and 'Odds' will always be the same. Good for a uniform look throughout the page.
-Update your CSS. Use appropriate prefix: -moz-transform, -webkit-transform, etc. -
.quake span.quake:nth-child(even){display: inline-block; transform: rotate(-10deg);}
.quake span.quake:nth-child(odd){display: inline-block; transform: rotate(10deg);}

$("#no_randomDisp").quake({'random' : false});

You can define your own angles for a specific element without changing CSS. This displays -40 degrees for 'even' characters, 40 degrees for 'odd' characters.
$("#userDisp").quake({'even' : -40, 'odd' : 40});

You can have fun with Quake Text by having them be event-driven. I've been using text input to change the text in realtime:

<div id = "defDisp" class = "quake"></div>
<input type = "text" id = "def" />

  // Random text angles by default

Customize your effects with the supported options:
'random' : true,   // Randomize the angle? The values for randomMin and randomMax be used to determine the final rotation angle.
'randomMin' : -20, // The min rotation angle random rotations. Can be negative.
'randomMax' : 20,  // The max rotation angle random rotations. Can be negative.
'even' : null,     // (If not using random) Sets explicit angle for every [even] character in this element.
'odd' : null,      // (If not using random) Sets explicit angle for every [odd] character in this element.
'xShift' : 2,      // (Random) The max number of pixels the letters will move left/right. Default 2
'yShift' : 5       // (Random) The max number of pixels the letters will move up/down. Default 5

Get Creative
// Quake every 20 milleseconds...With a little more shifting!
var timerHandle = setInterval(function(){$("#getCreative").quake({xShift:15, yShift:15});}, 20);


Written by Jerome "PJ" Williams


If you have ideas for improvements, fork it on Github and make it better!

jwQuakeText <EarthquakeText, QuakeText or just Quake>

jwQakeText is a simple plugin that will jumble your text like an earthquake.
Features are random (default), CSS defined, or define on-the-fly.
Use Quake to give an element's text a little flair with minimal effort.
Quake returns "this" so you can chain it to other functions.

NOTE: Try to use plain text inside of elements.
- Text that has inline tags around them (ex: <span style...>This Text</span>) will be returned with default attributes.
- If you want to style your element text, use styles on the outside of that element, not inside the tag.

STYLING: You can style the resulting text by using the jwquaketext.css stylesheet.

Free to use and tweak. Leave some credit when you can.

© JWorks Studios | Plugins