-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
56 lines (47 loc) · 1.79 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
---
---
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Halloween</title>
<link href="resources/main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Happy Halloween</h1>
<p>A seasonal experiment inspired by CJ Gammon’s <a href="http://cjgammon.com">masking interaction</a>.<br/>
Try click/hover/drag.</p>
<div class="tile-area">
{% assign monsters = "reaper|jacko|mummy|werewolf|ghost|vampire|skeleton|zombie|witch" | split: "|" %}
{% for monster in monsters %}
<div class="tile">
<img src="resources/{{ monster }}.svg" >
<svg id="{{ monster }}" class="tile-mask" viewBox="0 0 320 200">
<mask id="mask{{ forloop.index }}">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<circle cx="0" cy="0" r="0" id="circle1" fill="black" />
</mask>
<g class="cover {% cycle '', ' invert' %}" mask="url(#mask{{ forloop.index }})">
<rect x="0" y="0" width="100%" height="100%" fill="gray" />
<use xlink:href="resources/bat.svg#bat" width="100%" height="100%" />
</g>
</svg>
</div>
{% endfor %}
</div>
<p>Artwork from <a href="http://freepik.com">Freepik</a> and <a href="http://thenounproject/bashburn">The Noun Project</a>. <br/>
<a href="https://github.com/betravis/halloween-masking/">View source</a></p>
<script src="resources/jquery-2.1.1.min.js"></script>
<script src="resources/snap.svg-0.3.0.min.js"></script>
<script src="resources/card-handler.js"></script>
<script>
$(function() {
$(".tile-mask").each(function(i, el) {
new CardHandler(el, "mask circle");
});
});
</script>
</body>
</html>