Artify.js/index.html at master · jamescryer/Artify.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
136
137
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Artify.js : CSS3 art generator</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" href="libs/twitter-bootstrap/bootstrap.min.css">
		<link rel="stylesheet" href="artify.css">

		<style>
			body {
				padding-top: 60px;
				}

			footer {
				margin-top: 45px;
				padding: 35px 0 36px;
				border-top: 1px solid #e5e5e5;
				}

			#example-image {
				width: 200px;
				border: 5px solid #e5e5e5;
				}

		</style>

	</head>
	<body>
		<div class="container">
			<header>
				<div class="page-header">
					<h1>Artify.js : CSS3 art generator <small>Drop an image, see the art</small></h1>
				</div>
			</header>

			<section role="main">
				<div class="row">
					<div class="span12">
						<div class="hero-unit">
							<div class="row">
								<div class="span6">
									<p>
										<div id="drop-zone" class="artify-drop-zone">
											Drop image here.
										</div>
									</p>
								</div>
								<div class="span4">
									<h2>What is this?</h2>
									<p>
										Artify.js is a simple jQuery plugin which allows you to transform images into art with CSS3.
									</p>
									<p>
										Inspired by <a href="http://www.thismanslife.co.uk/projects/lab/isthisart/" target="_blank">Is This Art</a> and <a href="http://www.nihilogic.dk/labs/jsascii/" target="_blank">JS Ascii</a>.
									</p>
									<p>
										<strong>Try it for yourself.</strong>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="span6">
						<h2>How does it work?</h2>
						<p>
							Artify.js uses the <a href="https://developer.mozilla.org/en/Using_files_from_web_applications" target="_blank">HTML5 File API</a>, and CSS3.
							It only works in browsers that support the HTML5 File API, Chrome and Firefox.
						</p>
						<p>
							<br/>
							<a class="btn btn-large btn-primary" href="https://github.com/jamescryer/artify.js/"><strong>View project on Github</strong></a>
						</p>
					</div>
					<div class="span6">
						<h2>How can I use it?</h2>
						<p>Invoke Artify on a block element to create a drop zone</p>
						<pre>
$('div#drop-zone').artify();</pre>
						<p>You can provide Artify with two options</p>
						<pre>
$('div#drop-zone').artify({
  className: 'warm semi', // Apply your own styles
  unitSize: 12 // Pixel size of each block
});</pre>
						<br />
						<div class="row">
							<div class="span3">
								<p>Calling Artify on an image will convert the image in place.</p>
<pre>
$('img#image-one').artify();</pre>
								<p>Try for yourself. <button class="btn btn-success" id="convert-image">Convert image</button></p>
							</div>
							<div class="span3">
								<img src="face.jpg" id="example-image"/>
							</div>
						</div>

					</div>
				</div>
			</section>

			<footer class="footer">
				<p>
					Cheers, this was fun! I am James Cryer. <a href="https://github.com/jamescryer" target="_blank">Github</a> | <a href="https://twitter.com/jamescryer" target="_blank">Twitter</a> | <a href="http://jamescryer.wordpress.com" target="_blank">Blog</a>
				</p>
			</footer>
		</div>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="artify.js"></script>

		<script>
			$('#drop-zone').artify({
				className: 'warm semi',
				unitSize: 12
			});

			$('#convert-image').click(function(event){
				event.preventDefault();
				$('#example-image').artify();
				$(this).unbind('click');
			});
		</script>

		<script>
			var _gaq=[["_setAccount","UA-30502807-1"],["_trackPageview"]];
			(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
			g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
			s.parentNode.insertBefore(g,s)}(document,"script"));
		</script>

	</body>
</html>