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:

<head>
  <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" />
</head>

(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>

or

// 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)
$("#defDisp").quake();
	
or

// Everything with class quake
$(".quake").quake();

Default (Random)

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

$("#defDisp").quake();

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);}

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

User-Defined

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:

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

-jQuery-
$("#def").keyup(function(){
  // Random text angles by default
  $("#defDisp").html($(this).val()).quake();
});

Options

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

Author

Written by Jerome "PJ" Williams
http://www.jworksstudios.com
twitter/@JWorksStudios
g+/JWorksStudios
3.3.2013

Github

If you have ideas for improvements, fork it on Github and make it better!
https://github.com/jworksstudios/jwquaketext/

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.