forked from peterhry/CircleType
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (116 loc) · 7.12 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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CircleType.js lets you set type on a circle</title>
<meta name="description" content="CircleType.js is a tiny (4kb) jQuery plugin that lets you set type on a circle">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<script type="text/javascript" src="//use.typekit.net/fbl0lhq.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<link rel="stylesheet" href="stylesheets/screen.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="puffy" id="title">CircleType.js</h1>
<div class="social">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="peterhry" data-size="large" data-url="http://circletype.labwire.ca/">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<p>Circletype.js is a tiny (2.7kb) jQuery plugin that lets you set type on a circle</p>
<h2 class="strong">Features</h2>
<ul class="bullets">
<li>Use any font</li>
<li>Adjust letter-spacing as usual with CSS</li>
<li><a href="#reverse">Flip it</a> around so it reads counter-clockwise instead</li>
<li>Set the radius manually or <a href="#auto">let CircleType.js figure it out for you</a></li>
<li>Works in <a href="#fluid">fluid and responsive</a> layouts</li>
<li>Plays well with <a href="#fitText">FitText.js</a></li>
</ul>
<p>
<a href="https://github.com/peterhry/circletype" class="btn">Download on GitHub</a>
</p>
<h2 class="strong">Demos</h2>
<h3 class="puffy">Basic Arc</h3>
<p>Here’s your basic arc, meh.</p>
<div class="demo-box" id="demo-box1">
<h2 id="demo1" class="demo strong">Here is some type on a simple arc.</h2>
</div>
<code><h2 id="demo1">Here is some type on a simple arc.</h2>
$('#demo1').circleType({radius: 384});
</code>
<h3 class="puffy" id="reverse">Reversed Arc</h3>
<p>By setting dir to -1, the text will flow counter-clockwise instead.</p>
<div class="demo-box" id="demo-box2">
<h2 id="demo2" class="demo strong">Here is the same arc but this time reversed.</h2>
</div>
<code><h2 id="demo2">Here is the same arc but this time reversed.</h2>
$('#demo2').circleType({radius: 384, dir:-1});
</code>
<h3 class="puffy" id="auto">Auto Radius</h3>
<p>By leaving the radius empty, CircleType.js will find the perfect radius so the text makes a complete rotation.</p>
<div class="demo-box" id="demo-box3">
<h2 id="demo3" class="demo strong">This text makes a complete rotation no matter how long it is. </h2>
</div>
<code><h2 id="demo3">This text makes a complete rotation no matter how long it is. </h2>
$('#demo3').circleType();
</code>
<h3 class="puffy" id="fluid">Fluid</h3>
<p>The fluid setting gives the type a flexible radius (try resizing your window)</p>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">This arc shrinks and expands to fit inside its container. </h2>
</div>
<code><h2 id="demo4">This arc shrinks and expands to fit inside its container. </h2>
$('#demo4').circleType({fluid:true});
</code>
<h3 class="puffy" id="fitText">Using FitText.js</h3>
<p>Here’s how you can use <a href="http://fittextjs.com" target="_blank">FitText.js</a> to make the text a bit more flexible (try resizing your window)</p>
<div class="demo-box" id="demo-box5">
<h2 id="demo5" class="demo strong">I play well with FitText.js too! </h2>
</div>
<code><h2 id="demo5">I play well with FitText.js too! </h2>
$('#demo5').circleType({fitText:true, radius: 180});
</code>
<h2 class="strong">Requirements</h2>
<ul class="bullets">
<li><a href="http://letteringjs.com/" target="_blank">Lettering.js</a> is required</li>
<li>IE9+</li>
<li>Firefox 12+</li>
<li>Opera 10.5+</li>
<li>Safari 4.0+</li>
<li>Chrome 2.0+</li>
</ul>
<footer>
<a href="https://twitter.com/peterhry" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @peterhry</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<p>CircleType.js is © 2013 <a href="http://peterhrynkow.com">Peter Hrynkow</a> and is licensed under the terms of GPL & MIT licenses.</p>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/circletype.js"></script>
<script>
$('#title').circleType({radius: 400, fluid: true});
$('#demo1').circleType({radius: 384});
$('#demo2').circleType({radius: 384, dir:-1});
$('#demo3').circleType();
$('#demo4').circleType({fluid:true});
$('#demo5').circleType({fitText:true, radius: 180})
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1581384-27']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>