forked from jaz303/jquery-grab-bag
-
Notifications
You must be signed in to change notification settings - Fork 0
/
text-effects.html
74 lines (60 loc) · 4.69 KB
/
text-effects.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery Grab Bag - Text Effects Plugin</title>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://onehackoranother.com/feed/" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://onehackoranother.com/feed/rss/" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="http://onehackoranother.com/feed/atom/" />
<script type='text/javascript' src='javascripts/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='javascripts/jquery.text-effects.js'></script>
<link rel="stylesheet" href="stylesheets/main.css" type="text/css" />
<style type='text/css'>
#unscramble,
#typewriter,
#scrambled-writer,
#rot13 { font-family: monospace; border: 1px solid black; padding: 0.5em; min-height: 130px; }
</style>
</head>
<body>
<div id='container'>
<h1>
grab bag <span class='subtitle'>- assorted jQuery plugins</span>
</h1>
<div id='sidebar'>
<ul id='project-nav'>
<li><a href='index.html'>Plugin List</a></li>
</ul>
<ul id='ohoa-nav'>
<li><a href='http://onehackoranother.com/feed/' id='subscribe'>Subscribe for updates »</a></li>
<li><a href='http://onehackoranother.com/projects/'>Back to projects »</a></li>
<li><a href='http://onehackoranother.com/'>Back to onehackoranother.com »</a></li>
</ul>
</div>
<div id='main'>
<h2>Text Effects</h2>
<p>Some fun little text effects. These manipulate <code>$(ele).text()</code> so will
probably be disastrously broken with inner HTML content.</p>
<h3>ROT-13</h3>
<p>(also applies ROT-5 to numerics)</p>
<pre>$("#my-container").rot13();</pre>
<p><a href='#' onclick='$("#rot13").rot13(); return false;'>Run demo</a></p>
<div id='rot13'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<h3>Typewriter</h3>
<pre>$("#my-container").typewriter();</pre>
<p><a href='#' onclick='$("#typewriter").typewriter(); return false;'>Run demo</a></p>
<div id='typewriter'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<h3>Unscramble</h3>
<pre>$("#my-container").unscramble();</pre>
<p><a href='#' onclick='$("#unscramble").unscramble(); return false;'>Run demo</a></p>
<div id='unscramble'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<h3>Scrambled Writer</h3>
<pre>$("#my-container").scrambledWriter();</pre>
<p><a href='#' onclick='$("#scrambled-writer").scrambledWriter(); return false;'>Run demo</a></p>
<div id='scrambled-writer'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<h2>Direct Link</h2>
<p><a href='http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.text-effects.js'>jquery.text-effects.js</a></p>
</div>
</div>
</body>
</html>