Lettering.js/examples/index.html at 80d53da7ea753af9836923dc09a23171e35161fe · davatron5000/Lettering.js · GitHub

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Lettering.js Examples</title>
  <meta name="description" content="A jQuery Plugin that allows you to style each individual letter and more.">
  <meta name="author" content="Dave Rupert">

  <meta name="viewport" content="width=device-width; initial-scale=1.0">
	<link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>

	<style type="text/css" media="screen">
		.demo {
			padding: 50px;
			border:1px solid #ccc;
			font-weight:bold;
			color: red;
			background:#d0d0d0;
			font-size:20px;
			line-height:1.5;
			text-align:center;
		}

		.demo h1 { font-size:72px;  text-transform:uppercase; margin-bottom:0px;}
		.char2,
		#demo2 .word2,
		.line2 { color: orange; }
		.char3,
		.word3,
		.line3 { color: yellow; }
		.char4,
		.line4 { color: blue; }
		.char5 { color: green; }
		.char6 { color: indigo; }
		.char7 { color: violet; }
	</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="../jquery.lettering.js"></script>
  <script>
	$(document).ready(function() {
			$("#demo1 h1").lettering();
			$("#demo2 h1").lettering('words');
			$("#demo3 p").lettering('lines');
			$("#demo4 h1").lettering('words').children("span").lettering();
			$("#demo5 h1").lettering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});
		});
  </script>

</head>

<body>

  <div id="container">
	<header>
			<h1 id="thebrand">Lettering.JS</h1>
			<p>The following are some hokey examples of how you can implement LETTERING.JS.
	</header>

	<article id="main">
			<section id='lettering-demo'>
				<h2>Letters</h2>
				<h4>The HTML</h4>
<pre><code>	&lt;div id=&quot;demo1&quot; class=&quot;demo&quot;&gt;
&nbsp;&nbsp;&lt;h1&gt;Rainbow&lt;/h1&gt;
&lt;/div&gt;
</code></pre>

<h4>The jQuery</h4>
<pre><code>$(document).ready(function() {
&nbsp;&nbsp;$("#demo1 h1").lettering();
});
</code></pre>

				<h4>The Result</h4>
				<div id="demo1" class="demo">
					<h1>Rainbow</h1>
				</div>

			</section>

			<section id='words-demo'>
				<h2>Words</h2>
				<code><pre>$("#demo2 h1").lettering('words');</pre></code>

			<h4>The Result</h4>
				<div id="demo2" class="demo">
					<h1>Hi, Multi Color</h1>
				</div>
			</section>

			<section id='lines-demo'>
				<h2>Lines</h2>
				<code><pre>$("#demo3 p").lettering('lines');</pre></code>

			<h4>The Result</h4>
				<div id="demo3" class="demo">
					<p>This is an amazing<br/> Revolution in Typography. <br/> The possibilities are endless: <br/> Coloring, Vertical spacing, and Kerning.</p>
				</div>
			</section>

			<section id='advanced1-demo'>
				<h2>Advanced #1: Chaining 2 Methods</h2>
<code><pre>$("#demo4 h1").lettering('words').children("span").lettering();</pre></code>
			<h4>The Result</h4>
				<div id="demo4" class="demo">
					<h1>Double Rainbow</h1>
				</div>
			</section>

			<section id='advanced2-demo'>
				<h2>Advanced #2: Chaining and Styling</h2>
<code><pre>$("#demo5 h1").lettering()
	.children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});</pre></code>
			<h4>The Result</h4>
				<div id="demo5" class="demo">
					<h1>WOOOoo!</h1>
				</div>
			</section>

	</article>

	<footer>
			<p>&copy;2010 Dave Rupert <a href="http://daverupert.com">http://daverupert.com</a>
	</footer>
  </div>

</body>
</html>