-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (259 loc) · 20.8 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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kwest Arcade Card Effect - Demo 1</title>
<meta name="description" content="CKwest Arcade Card Effect with SVG clipPath" />
<meta name="keywords" content="clipPath, svg, effect, layout, expansion, images, grid, polygon" />
<meta name="author" content="Kwest Arcade Card " />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/card.css" />
<link rel="stylesheet" type="text/css" href="css/pattern.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
var root = document.getElementsByTagName('html')[0];
root.setAttribute('class', 'ff');
};
</script>
</head>
<body class="demo-1">
<div class="container">
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Development/ColorExtraction/" title="Previous Demo"><span>Previous Demo</span></a>
<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=24222" title="Back to the article"><span>Back to the Codrops article</span></a>
</div>
<h1>Kwest Arcade Card Effect with SVG clipPath <span>Circular clip</span></h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</nav>
</header>
<div class="content">
<!-- trianglify pattern container -->
<div class="pattern pattern--hidden"></div>
<!-- cards -->
<div class="wrapper">
<div class="card">
<div class="card__container card__container--closed">
<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
<defs>
<clipPath id="clipPath1">
<!-- r = 992 = hyp = Math.sqrt(960*960+250*250) -->
<circle class="clip" cx="960" cy="250" r="992"></circle>
</clipPath>
</defs>
<image clip-path="url(#clipPath1)" width="1920" height="500" xlink:href="img/a.jpg"></image>
</svg>
<div class="card__content">
<i class="card__btn-close fa fa-times"></i>
<div class="card__caption">
<h2 class="card__title">Tristan and Isolde</h2>
<p class="card__subtitle">A modern day love story</p>
</div>
<div class="card__copy">
<div class="meta">
<img class="meta__avatar" src="img/authors/1.png" alt="author01" />
<span class="meta__author">Gerry Sutherland</span>
<span class="meta__date">06/19/2015</span>
</div>
<p>Business model canvas bootstrapping deployment startup. In A/B testing pivot niche market alpha conversion startup down monetization partnership business-to-consumer success for investor mass market business-to-business.</p>
<p>Release creative social proof influencer iPad crowdsource gamification learning curve network effects monetization. Gamification business plan mass market www.discoverartisans.com direct mailing ecosystem seed round sales long tail vesting period.</p>
<p>Product management ramen bootstrapping seed round venture holy grail technology backing partner network entrepreneur beta marketing value proposition. Android stealth conversion scrum project network effects. Creative alpha long tail conversion stealth growth hacking iteration investor A/B testing prototype customer. Startup www.discoverartisans.com direct mailing launch party partnership market ramen metrics focus value proposition.</p>
<p>Stock infrastructure seed round sales paradigm shift technology user experience focus gamification. Partnership metrics business plan stealth business-to-business. Deployment graphical user interface monetization. Twitter incubator scrum project entrepreneur branding burn rate ramen backing paradigm shift virality crowdsource.</p>
<p>Social proof MVP ecosystem. Ramen launch party pitch deployment stealth. Vesting period MVP equity. Focus creative partnership founders iteration agile development infographic.</p>
<p>Low hanging fruit burn rate innovator user experience niche market A/B testing creative launch party product management release. Www.discoverartisans.com influencer business model canvas user experience gamification paradigm shift startup research & development iPad agile development. Strategy incubator infographic success marketing buzz A/B testing responsive web design. Traction research & development pitch seed money venture niche market accelerator network effects.</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__container card__container--closed">
<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
<defs>
<clipPath id="clipPath2">
<!-- r = 992 = hyp = Math.sqrt(960*960+250*250) -->
<circle class="clip" cx="960" cy="250" r="992"></circle>
</clipPath>
</defs>
<image clip-path="url(#clipPath2)" width="1920" height="500" xlink:href="img/b.jpg"></image>
</svg>
<div class="card__content">
<i class="card__btn-close fa fa-times"></i>
<div class="card__caption">
<h2 class="card__title">About Helen</h2>
<p class="card__subtitle">A story about a woman</p>
</div>
<div class="card__copy">
<div class="meta">
<img class="meta__avatar" src="img/authors/2.png" alt="author02" />
<span class="meta__author">Frank Posterius</span>
<span class="meta__date">06/16/2015</span>
</div>
<p>Business model canvas bootstrapping deployment startup. In A/B testing pivot niche market alpha conversion startup down monetization partnership business-to-consumer success for investor mass market business-to-business.</p>
<p>Release creative social proof influencer iPad crowdsource gamification learning curve network effects monetization. Gamification business plan mass market www.discoverartisans.com direct mailing ecosystem seed round sales long tail vesting period.</p>
<p>Product management ramen bootstrapping seed round venture holy grail technology backing partner network entrepreneur beta marketing value proposition. Android stealth conversion scrum project network effects. Creative alpha long tail conversion stealth growth hacking iteration investor A/B testing prototype customer. Startup www.discoverartisans.com direct mailing launch party partnership market ramen metrics focus value proposition.</p>
<p>Stock infrastructure seed round sales paradigm shift technology user experience focus gamification. Partnership metrics business plan stealth business-to-business. Deployment graphical user interface monetization. Twitter incubator scrum project entrepreneur branding burn rate ramen backing paradigm shift virality crowdsource.</p>
<p>Social proof MVP ecosystem. Ramen launch party pitch deployment stealth. Vesting period MVP equity. Focus creative partnership founders iteration agile development infographic.</p>
<p>Low hanging fruit burn rate innovator user experience niche market A/B testing creative launch party product management release. Www.discoverartisans.com influencer business model canvas user experience gamification paradigm shift startup research & development iPad agile development. Strategy incubator infographic success marketing buzz A/B testing responsive web design. Traction research & development pitch seed money venture niche market accelerator network effects.</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__container card__container--closed">
<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
<defs>
<clipPath id="clipPath3">
<!-- r = 992 = hyp = Math.sqrt(960*960+250*250) -->
<circle class="clip" cx="960" cy="250" r="992"></circle>
</clipPath>
</defs>
<image clip-path="url(#clipPath3)" width="1920" height="500" xlink:href="img/c.jpg"></image>
</svg>
<div class="card__content">
<i class="card__btn-close fa fa-times"></i>
<div class="card__caption">
<h2 class="card__title">A mild winter</h2>
<p class="card__subtitle">Helen's view on wells</p>
</div>
<div class="card__copy">
<div class="meta">
<img class="meta__avatar" src="img/authors/3.png" alt="author03" />
<span class="meta__author">Sarah Lester</span>
<span class="meta__date">06/16/2015</span>
</div>
<p>Business model canvas bootstrapping deployment startup. In A/B testing pivot niche market alpha conversion startup down monetization partnership business-to-consumer success for investor mass market business-to-business.</p>
<p>Release creative social proof influencer iPad crowdsource gamification learning curve network effects monetization. Gamification business plan mass market www.discoverartisans.com direct mailing ecosystem seed round sales long tail vesting period.</p>
<p>Product management ramen bootstrapping seed round venture holy grail technology backing partner network entrepreneur beta marketing value proposition. Android stealth conversion scrum project network effects. Creative alpha long tail conversion stealth growth hacking iteration investor A/B testing prototype customer. Startup www.discoverartisans.com direct mailing launch party partnership market ramen metrics focus value proposition.</p>
<p>Stock infrastructure seed round sales paradigm shift technology user experience focus gamification. Partnership metrics business plan stealth business-to-business. Deployment graphical user interface monetization. Twitter incubator scrum project entrepreneur branding burn rate ramen backing paradigm shift virality crowdsource.</p>
<p>Social proof MVP ecosystem. Ramen launch party pitch deployment stealth. Vesting period MVP equity. Focus creative partnership founders iteration agile development infographic.</p>
<p>Low hanging fruit burn rate innovator user experience niche market A/B testing creative launch party product management release. Www.discoverartisans.com influencer business model canvas user experience gamification paradigm shift startup research & development iPad agile development. Strategy incubator infographic success marketing buzz A/B testing responsive web design. Traction research & development pitch seed money venture niche market accelerator network effects.</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__container card__container--closed">
<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
<defs>
<clipPath id="clipPath4">
<!-- r = 992 = hyp = Math.sqrt(960*960+250*250) -->
<circle class="clip" cx="960" cy="250" r="992"></circle>
</clipPath>
</defs>
<image clip-path="url(#clipPath4)" width="1920" height="500" xlink:href="img/d.jpg"></image>
</svg>
<div class="card__content">
<i class="card__btn-close fa fa-times"></i>
<div class="card__caption">
<h2 class="card__title">Food sources</h2>
<p class="card__subtitle">What will we eat in 30 years?</p>
</div>
<div class="card__copy">
<div class="meta">
<img class="meta__avatar" src="img/authors/4.png" alt="author04" />
<span class="meta__author">Lena Bestofos</span>
<span class="meta__date">06/14/2015</span>
</div>
<p>Business model canvas bootstrapping deployment startup. In A/B testing pivot niche market alpha conversion startup down monetization partnership business-to-consumer success for investor mass market business-to-business.</p>
<p>Release creative social proof influencer iPad crowdsource gamification learning curve network effects monetization. Gamification business plan mass market www.discoverartisans.com direct mailing ecosystem seed round sales long tail vesting period.</p>
<p>Product management ramen bootstrapping seed round venture holy grail technology backing partner network entrepreneur beta marketing value proposition. Android stealth conversion scrum project network effects. Creative alpha long tail conversion stealth growth hacking iteration investor A/B testing prototype customer. Startup www.discoverartisans.com direct mailing launch party partnership market ramen metrics focus value proposition.</p>
<p>Stock infrastructure seed round sales paradigm shift technology user experience focus gamification. Partnership metrics business plan stealth business-to-business. Deployment graphical user interface monetization. Twitter incubator scrum project entrepreneur branding burn rate ramen backing paradigm shift virality crowdsource.</p>
<p>Social proof MVP ecosystem. Ramen launch party pitch deployment stealth. Vesting period MVP equity. Focus creative partnership founders iteration agile development infographic.</p>
<p>Low hanging fruit burn rate innovator user experience niche market A/B testing creative launch party product management release. Www.discoverartisans.com influencer business model canvas user experience gamification paradigm shift startup research & development iPad agile development. Strategy incubator infographic success marketing buzz A/B testing responsive web design. Traction research & development pitch seed money venture niche market accelerator network effects.</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__container card__container--closed">
<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
<defs>
<clipPath id="clipPath5">
<!-- r = 992 = hyp = Math.sqrt(960*960+250*250) -->
<circle class="clip" cx="960" cy="250" r="992"></circle>
</clipPath>
</defs>
<image clip-path="url(#clipPath5)" width="1920" height="500" xlink:href="img/e.jpg"></image>
</svg>
<div class="card__content">
<i class="card__btn-close fa fa-times"></i>
<div class="card__caption">
<h2 class="card__title">Swimming in the ocean</h2>
<p class="card__subtitle">A Makrel's story</p>
</div>
<div class="card__copy">
<div class="meta">
<img class="meta__avatar" src="img/authors/5.png" alt="author05" />
<span class="meta__author">Michaela Walters</span>
<span class="meta__date">06/11/2015</span>
</div>
<p>Business model canvas bootstrapping deployment startup. In A/B testing pivot niche market alpha conversion startup down monetization partnership business-to-consumer success for investor mass market business-to-business.</p>
<p>Release creative social proof influencer iPad crowdsource gamification learning curve network effects monetization. Gamification business plan mass market www.discoverartisans.com direct mailing ecosystem seed round sales long tail vesting period.</p>
<p>Product management ramen bootstrapping seed round venture holy grail technology backing partner network entrepreneur beta marketing value proposition. Android stealth conversion scrum project network effects. Creative alpha long tail conversion stealth growth hacking iteration investor A/B testing prototype customer. Startup www.discoverartisans.com direct mailing launch party partnership market ramen metrics focus value proposition.</p>
<p>Stock infrastructure seed round sales paradigm shift technology user experience focus gamification. Partnership metrics business plan stealth business-to-business. Deployment graphical user interface monetization. Twitter incubator scrum project entrepreneur branding burn rate ramen backing paradigm shift virality crowdsource.</p>
<p>Social proof MVP ecosystem. Ramen launch party pitch deployment stealth. Vesting period MVP equity. Focus creative partnership founders iteration agile development infographic.</p>
<p>Low hanging fruit burn rate innovator user experience niche market A/B testing creative launch party product management release. Www.discoverartisans.com influencer business model canvas user experience gamification paradigm shift startup research & development iPad agile development. Strategy incubator infographic success marketing buzz A/B testing responsive web design. Traction research & development pitch seed money venture niche market accelerator network effects.</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__container card__container--closed">
<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
<defs>
<clipPath id="clipPath6">
<!-- r = 992 = hyp = Math.sqrt(960*960+250*250) -->
<circle class="clip" cx="960" cy="250" r="992"></circle>
</clipPath>
</defs>
<image clip-path="url(#clipPath6)" width="1920" height="500" xlink:href="img/f.jpg"></image>
</svg>
<div class="card__content">
<i class="card__btn-close fa fa-times"></i>
<div class="card__caption">
<h2 class="card__title">Freedom Fighters</h2>
<p class="card__subtitle">When it's too hot to think</p>
</div>
<div class="card__copy">
<div class="meta">
<img class="meta__avatar" src="img/authors/6.png" alt="author06" />
<span class="meta__author">Tom Goldman</span>
<span class="meta__date">06/10/2015</span>
</div>
<p>Business model canvas bootstrapping deployment startup. In A/B testing pivot niche market alpha conversion startup down monetization partnership business-to-consumer success for investor mass market business-to-business.</p>
<p>Release creative social proof influencer iPad crowdsource gamification learning curve network effects monetization. Gamification business plan mass market www.discoverartisans.com direct mailing ecosystem seed round sales long tail vesting period.</p>
<p>Product management ramen bootstrapping seed round venture holy grail technology backing partner network entrepreneur beta marketing value proposition. Android stealth conversion scrum project network effects. Creative alpha long tail conversion stealth growth hacking iteration investor A/B testing prototype customer. Startup www.discoverartisans.com direct mailing launch party partnership market ramen metrics focus value proposition.</p>
<p>Stock infrastructure seed round sales paradigm shift technology user experience focus gamification. Partnership metrics business plan stealth business-to-business. Deployment graphical user interface monetization. Twitter incubator scrum project entrepreneur branding burn rate ramen backing paradigm shift virality crowdsource.</p>
<p>Social proof MVP ecosystem. Ramen launch party pitch deployment stealth. Vesting period MVP equity. Focus creative partnership founders iteration agile development infographic.</p>
<p>Low hanging fruit burn rate innovator user experience niche market A/B testing creative launch party product management release. Www.discoverartisans.com influencer business model canvas user experience gamification paradigm shift startup research & development iPad agile development. Strategy incubator infographic success marketing buzz A/B testing responsive web design. Traction research & development pitch seed money venture niche market accelerator network effects.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /cards -->
</div><!-- /content -->
<!-- Related demos -->
</div>
<!-- /container -->
<!-- JS -->
<script src="js/vendors/trianglify.min.js"></script>
<script src="js/vendors/TweenMax.min.js"></script>
<script src="js/vendors/ScrollToPlugin.min.js"></script>
<script src="js/vendors/cash.min.js"></script>
<script src="js/Card-circle.js"></script>
<script src="js/demo.js"></script>
</body>
</html>