-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
202 lines (199 loc) · 6.95 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ultimate frisbee plays</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Eevis Panula" />
<meta
name="description"
content="Ultimate frisbee plays animated with CSS."
/>
<link
rel="icon"
href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/flying-disc_1f94f.png"
/>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>Ultimate frisbee plays</h1>
<p>
This is a little project for learning some CSS-animations. As I play
ultimate frisbee, and we often use drawings to demonstrate tactics, I
wanted to try out if I could produce some plays with pure CSS. This site
uses hint of JavaScript for smoother experience. Obviously, I couldn't
use our teams plays, so I had to use Google to find something. Link to
original plays from
<a href="https://playspedia.com/">Playspedia</a> can be found after
every animation.
</p>
<p>⬇ <a href="#main">Scroll down to plays</a> ⬇</p>
</header>
<main id="main">
<article class="wrapper">
<h2>Hurricane</h2>
<section class="play" aria-hidden="true">
<div class="animations-disabled">Animations disabled</div>
<div class="field" id="play-1">
<div class="player handler-1"></div>
<div class="player handler-2"></div>
<div class="player player-5"></div>
<div class="player player-4"></div>
<div class="player player-3"></div>
<div class="player player-2"></div>
<div class="player player-1"></div>
<div class="disc"></div>
</div>
</section>
<section class="info">
<div class="row" aria-hidden="true">
<div class="row">
<div class="info-player"></div>
Player
</div>
<div class="row">
<div class="info-disc"></div>
Disc
</div>
</div>
<div class="info-text">
Original:
<a href="https://playspedia.com/play/20238"
>https://playspedia.com/play/20238</a
>
</div>
<div>
<ol>
<li>
The players have lined up in a vertical stack. Handler 1 throws
the disc to the center to handler 2, and simultaneosly the first
player in the stack activates cutting to the break side, and the
last player in the stack cuts to the open side.
</li>
<li>
The player cutting to the open side cuts under, and the player
cutting to the break side cuts deep.
</li>
<li>The player on the open side receives the disc.</li>
<li>The player with the disc throws it to deep.</li>
</ol>
</div>
</section>
</article>
<article class="wrapper">
<h2>Zipper</h2>
<section class="play" aria-hidden="true">
<div class="animations-disabled">Animations disabled</div>
<div class="field" id="play-2">
<div class="player handler-1"></div>
<div class="player handler-2"></div>
<div class="player player-5"></div>
<div class="player player-4"></div>
<div class="player player-3"></div>
<div class="player player-2"></div>
<div class="player player-1"></div>
<div class="disc"></div>
</div>
</section>
<section class="info">
<div class="row" aria-hidden="true">
<div class="row">
<div class="info-player"></div>
Player
</div>
<div class="row">
<div class="info-disc"></div>
Disc
</div>
</div>
<div class="info-text">
Original:
<a href="https://playspedia.com/play/20209"
>https://playspedia.com/play/20209</a
>
</div>
<div>
<ol>
<li>
Players have lined up in a vertical stack. The last two players
in the stack cut up and then under to the opposite sides of the
stack.
</li>
<li>The third last player in the stack cuts deep.</li>
<li>The handler with the disc throws deep.</li>
</ol>
</div>
</section>
</article>
<article class="wrapper">
<h2>End zone</h2>
<section class="play" aria-hidden="true">
<div class="animations-disabled">Animations disabled</div>
<div class="field" id="play-3">
<div class="player handler-1"></div>
<div class="player handler-2"></div>
<div class="player handler-3"></div>
<div class="player player-4"></div>
<div class="player player-3"></div>
<div class="player player-2"></div>
<div class="player player-1"></div>
<div class="disc"></div>
</div>
</section>
<section class="info">
<div class="row" aria-hidden="true">
<div class="row">
<div class="info-player"></div>
Player
</div>
<div class="row">
<div class="info-disc"></div>
Disc
</div>
</div>
<div class="info-text">
Original:
<a href="https://playspedia.com/play/20130">
https://playspedia.com/play/20130
</a>
</div>
<div>
<ol>
<li>
Players have lined up in a vertical stack in the end zone with
three handlers.
</li>
<li>The center handler cuts up to the side where the disc is.</li>
<li>
The first player from the vertical stack cuts for the dump and
if there is no pass, cuts up to the end zone.
</li>
<li>The handler throws the disc to the player.</li>
</ol>
</div>
</section>
</article>
</main>
<footer>
<a href="https://github.com/eevajonnapanula/ultimate-css-animations">
Link to source code
</a>
<div class="contacts">
<ul>
<li>
<a href="https://eevis.codes">Website</a>
</li>
<li>
<a href="https://github.com/eevajonnapanula">Github</a>
</li>
<li>
<a href="https://www.linkedin.com/in/eevajonna/">LinkedIn</a>
</li>
</ul>
</div>
<p>Made with 💜 by Eevis.</p>
</footer>
<script type="text/javascript" src="index.js"></script>
</body>
</html>