-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
102 lines (92 loc) · 14.6 KB
/
index.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
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
<html>
<head>
<title>Bhaukal: Frame by frame font animation</title>
<link rel="stylesheet" href="res/master.css">
<link rel="stylesheet" href="res/tomorrow-night.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="fonts/raleway/raleway.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:200,100' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f1.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f2.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f3.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f4.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f5.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f6.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f7.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f8.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f9.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f10.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f11.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f12.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f13.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f14.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f15.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f16.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f17.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f18.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f19.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f20.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f21.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f22.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f23.ttf">
<link rel="prefetch" href="fonts/raleway/frames/Raleway-f24.ttf">
<script src="lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="res/brain.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header>
<h1>BHAUKAL</h1>
<p> Animating typefaces | <span>One frame at a time</span></p>
</header>
<div id="frames">
<span style="font-family: Raleway-f1;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f2;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f3;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f4;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f5;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f6;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f7;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f8;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f9;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f10;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f11;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f12;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f13;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f14;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f15;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f16;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f17;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f18;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f19;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f20;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f21;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f22;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f23;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
<span style="font-family: Raleway-f24;">QWERTYUIOPASDFGHJKLZXCVBNM</span>
</div>
<div class="code">
<pre><code class="crayon-theme-tomorrow-night">
<div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-line" id="crayon-520e14c376d72027950498-1"><span class="crayon-c">// Animate all the letters in the DIV</span></div><div class="crayon-line" id="crayon-520e14c376d72027950498-2"><span class="crayon-v">animateAll</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-i">c</span><span class="crayon-sy">,</span><span class="crayon-i">n</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-520e14c376d72027950498-3"><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">n</span><span class="crayon-o">==</span><span class="crayon-cn">25</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-520e14c376d72027950498-4"><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">c</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-s">"font-family"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"Raleway-f"</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-i">n</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-520e14c376d72027950498-5"><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">c</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-s">"opacity"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e ">n *</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-cn">100</span><span class="crayon-o">/</span><span class="crayon-cn">12</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-520e14c376d72027950498-6"><span class="crayon-h"> </span><span class="crayon-e">setTimeout</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-520e14c376d72027950498-7"><span class="crayon-h"> </span><span class="crayon-e">animateAll</span><span class="crayon-sy">(</span><span class="crayon-i">c</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">n</span><span class="crayon-o">+</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-520e14c376d72027950498-8"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">44</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-520e14c376d72027950498-9"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-520e153162a6f021236828-11"><span class="crayon-e">animateAll</span><span class="crayon-sy">(</span><span class="crayon-s">"#kebabs"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">)</span></div></div>
<a href="javascript:void(0)" class="run" id="run-first">Run Code</a>
</code></pre>
</div>
<div class="demo">
<div id="box-first">KEBABS</div>
</div>
<div class="code">
<pre><code class="crayon-theme-tomorrow-night">
<div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-line" id="crayon-520e28e368639527206019-1"><span class="crayon-c">// Append & Animate the letter One-by-One</span></div><div class="crayon-line" id="crayon-520e28e368639527206019-2"><span class="crayon-v">animateOneByOne</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-i">c</span><span class="crayon-sy">,</span><span class="crayon-i">t</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-520e28e368639527206019-3"><span class="crayon-h"> </span><span class="crayon-st">as</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">t</span><span class="crayon-sy">.</span><span class="crayon-e">split</span><span class="crayon-sy">(</span><span class="crayon-s">""</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-520e28e368639527206019-4"><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">c</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-s">""</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-520e28e368639527206019-5"><span class="crayon-h"> </span><span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-st">in</span><span class="crayon-h"> </span><span class="crayon-st">as</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-520e28e368639527206019-6"><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">c</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">append</span><span class="crayon-sy">(</span><span class="crayon-s">"<span id='bh-"</span><span class="crayon-o">+</span><span class="crayon-i">a</span><span class="crayon-o">+</span><span class="crayon-s">"'>"</span><span class="crayon-o">+</span><span class="crayon-st">as</span><span class="crayon-sy">[</span><span class="crayon-i">a</span><span class="crayon-sy">]</span><span class="crayon-o">+</span><span class="crayon-s">"</span>"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-520e28e368639527206019-7"><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#bh-'</span><span class="crayon-o">+</span><span class="crayon-i">a</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-s">"opacity"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-520e28e368639527206019-8"><span class="crayon-h"> </span><span class="crayon-e">setTimeout</span><span class="crayon-sy">(</span><span class="crayon-i">animateAll</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e ">a*</span><span class="crayon-cn">1000</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"#bh-"</span><span class="crayon-o">+</span><span class="crayon-i">a</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-520e28e368639527206019-9"><span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-st">as</span><span class="crayon-sy">[</span><span class="crayon-i">a</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-520e28e368639527206019-10"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-520e28e368639527206019-11"><span class="crayon-sy">}</span></div></div>
<a href="javascript:void(0)" class="run" id="run-second">Run Code</a>
</code></pre>
</div>
<div class="demo">
<div id="box-second">GOMTI</div>
</div>
<footer>
<p>
You can download the fonts and the code from <a href="http://github.com/prtksxna/bhaukal" target="_blank">Github</a>. We would love to add more fonts to this, so if you can slice up a font and send it across please <a href="https://github.com/prtksxna/bhaukal/fork" target="_blank">fork</a> and send a pull request.
<br/><br/>
<span>Slicing & Dicing by <a href="http://twitter.com/anexasajoop/" target="_blank">Pooja</a> & <a href="http://twitter.com/prtksxna/" target="_blank">Prateek</a></span>
</p>
</footer>
</body>
</html>