enter-the-void.js by OKFocus

enter-the-void.js is a highly customizable jQuery plugin that allows for animation of typogragphy styles on the web.

Requirements

enter-the-void.js depends on jQuery (> v1.4).

Usage

enter-the-void.js should be bound to elements that contains type (headers, paragraphs, spans, etc).

Apply enter-the-void.js to an element on your webpage like so, within a <script> tag:

  $(document).ready(function(){
      $('h1').oktype();  
  });

When you hover on an <h1>, you'll now see the enter-the-void.js changing the type style. To make a more interesting animation, add an option or two:

  $(document).ready(function(){
      $('h1').oktype({
               randomColor: true,
               randomDecoration: true
             });
  });

Options

The following options are available to you:

option	description	default
weight	alternates the font weight by toggling or selecting at random (a string – ‘toggle’ or ‘random’)	null
minSize	the minimum desired size for the type (an int)	null
maxSize	the maximum desired size for the type (an int)	null
randomColor	randomizes type color (a boolean)	false
randomDecoration	Random from array of text-decoration rules (a boolean)	false
interval	the speed of our animation in milliseconds (an int)	100
toggleCase	randomizes capitalization and lowercase of type (a boolean)	false
minSpace	the maximum desired letter-spacing for type (an int)	null
maxSpace	the minimum desired letter-spacing for type (an int)	null
restore	restore the element to its prior state when not hovering (a boolean)	true
hover	execute animation on hover, otherwise always animate (a boolean)	true

Run Tests

OKFocus tests JavaScript with Jasmine. After cloning this repo simply run:

$ bundle install
$ rake jasmine