Dext: Text with depth, dimension, and dexterity. A small Javascript niche effect library to add frames to sentences.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
dext.css
dext.js

README.md

Dext

Text with depth, dimension, and dexterity. A small Javascript niche effect library to add frames to sentences.

Demo

http://brev.name

Why?

  • Large text, easy to read.
  • Say more with less space.
  • Wraps nicely with resize.
  • Works great on mobile.
  • Extreme browser compatability.
  • Mostly just Fun and Art, probably, though.

Example Source

Pre-Reqs

  • JQuery

Easy way, auto-parse based on spacing characters

Simple text only.

<link rel="stylesheet" type="text/css" href="dext.css" />
<ul class="dext-sentence dext-speed-fast">
  <li>This is frame One</li>
  <li>This is frame Two</li>
  <li>This is frame Three</li>
</ul>
<script src="jquery.js"></script>
<script src="dext.js"></script>

Regular way, manually group based on child nodes

Use this mode for putting in links, multiple words per register, etc.

<link rel="stylesheet" type="text/css" href="dext.css" />
<div class="dext-sentence dext-speed-slow">
  <div>
    <span>This</span>
    <span>is</span>
    <span>frame</span>
    <span>
      <a href="http://google.com">One</a>
    </span>
  </div>
  <div>
    <span>This</span>
    <span>is</span>
    <span>frame</span>
    <span>
      <a href="http://yahoo.com">Two</a>
    </span>
  </div>
</div>
<script src="jquery.js"></script>
<script src="dext.js"></script>

Code Help

How does it work?

  • Just tag any node with the .dext-sentence class.
  • Child nodes become the frames.
  • Child node text gets either automatically split into registers based on spacing characters, or if Grandchild nodes are detected, those are use for splitting.

Speed class names

  • .dext-speed-ludicrous
  • .dext-speed-fastest
  • .dext-speed-fast
  • .dext-speed-medium
  • .dext-speed-slow
  • .dext-speed-slowest (default)

Other special class names

  • .dext-after = Show this sentence only after the others have started playing.