-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
521 lines (514 loc) · 16 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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Artifice</title>
<style>
* {
box-sizing: border-box;
}
body {
display: grid;
width: 100%;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
line-height: 1.5;
max-width: 600px;
margin: 0 auto;
background: hsl(159.8, 50%, 63.7%);
padding: 0 0.5rem;
}
h1,
h2,
h3,
h4 {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
img {
max-width: 100%;
height: auto;
}
li {
margin-bottom: 1rem;
}
code {
font-family: "Fira Code", Courier, monospace;
font-size: 1.1em;
background-color: hsl(0deg 100% 0% / 0.15);
padding: 0.25em 0.2em 0.1em 0.2em;
}
</style>
</head>
<body>
<h2>Diamond Wipe</h2>
<p>A diamond-shaped wipe reveal of text.</p>
<img
src="diamond-wipe/img/demo.webp"
alt="demo of sin city animation"
width="787"
height="604"
/>
<p>
Check out the
<a href="diamond-wipe/index.html">demo</a>
</p>
<h2>Orange, you thirsty?</h2>
<p>
Whimsical take on a product card for orange juice. On hover, it reveals
the product with an animation.
</p>
<img
src="orange-you-thirsty/img/screenshots/demo.gif"
alt="animated demo of Orange, you thirsty?"
width="432"
height="504"
loading="lazy"
/>
<p>
Check out the
<a href="orange-you-thirsty/index.html">demo</a>.
</p>
<h2>Johnny Cash Busted!</h2>
<p>Animation of Johnny Cash's arrest sheet being filled out.</p>
<img
src="johnny-cash-busted/img/screenshots/demo.gif"
alt="animated demo of Johnny Cash Busted"
width="600"
height="628"
loading="lazy"
/>
<p>
Check out the
<a href="johnny-cash-busted/index.html">demo</a>.
</p>
<h2>Straight Outta Some Swiss Canton</h2>
<p>A poster for a NWA concert.</p>
<h3>Original</h3>
<img
src="straight-outta-some-swiss-canton/img/screenshot-original.png"
alt="Straight Outta Some Swiss Canton screenshot"
width="400"
height="601"
loading="lazy"
/>
<p>
Check out the
<a href="straight-outta-some-swiss-canton/original/index.html">demo</a>.
</p>
<h3>Remix</h3>
<img
src="straight-outta-some-swiss-canton/img/screenshot.gif"
alt="animated variant of Straight Outta Some Swiss Canton"
width="400"
height="457"
loading="lazy"
/>
<p>
Check out the
<a href="straight-outta-some-swiss-canton/remix/index.html">demo</a>.
</p>
<h2>They See Me Rollin</h2>
<p>
Kitsch wordplay of the opening lines of Chamillionaires' song 'Ridin
Dirty'.
</p>
<img
src="they-see-me-rollin/img/screenshot.gif"
alt="animated demo of They See Me Rollin"
width="401"
height="405"
loading="lazy"
/>
<p>
Check out the
<a href="they-see-me-rollin/index.html">demo</a>
</p>
<h2>Dada</h2>
<p>
Recreation of
<a href="https://www.artic.edu/artworks/229395/dada-poster"
>this poster by Paul Rand</a
>.
</p>
<h3>Original</h3>
<img
src="dada/img/screenshot.png"
alt="screenshot of Dada"
width="256"
height="355"
loading="lazy"
/>
<p>
Check out the
<a href="dada/original/index.html">demo</a>
</p>
<h3>Remix</h3>
<img
src="dada/img/screenshot.gif"
alt="animated demo of Dada"
width="250"
height="350"
loading="lazy"
/>
<p>
Check out the
<a href="dada/remix/index.html">demo</a>
</p>
<h2>Trump channeling Kanye</h2>
<p>
Trump spitting quotes from Kanye. Quotes are fetched from the
<a href="https://kanye.rest/">kanye.rest API</a>.
</p>
<img
src="trump-channeling-kanye/img/demo.gif"
alt="demo of trump channeling Kanye"
width="400"
height="520"
loading="lazy"
/>
<p>
Check out the
<a href="trump-channeling-kanye/index.html">demo</a>
</p>
<h2>Train Parallax</h2>
<p>
Created for an article -
<a href="https://roboleary.net/css/2020/11/17/parallax-animation.html"
>How to make an awesome horizontal parallax animation</a
>.
</p>
<img
src="train-parallax/img/screenshot.gif"
alt="animated demo of Train Parallax"
width="400"
height="394"
loading="lazy"
/>
<p>
Check out the
<a href="train-parallax/index.html">demo</a>
</p>
<h2>Black to White Disks</h2>
<p>
This is a web rendition of the painting
<a
href="https://www.wikiart.org/en/bridget-riley/black-to-white-disks-1952"
>Black to White Disks</a
>
by Bridget Riley.
</p>
<h3>Original</h3>
<img
src="black-to-white-disks/img/screenshot.png"
alt="screenshot of Black to White Disks"
width="536"
height="616"
loading="lazy"
/>
<p>
Check out the
<a href="black-to-white-disks/original/index.html">demo</a>
</p>
<h3>Remix</h3>
<img
src="black-to-white-disks/img/screenshot.gif"
alt="demo of Black to White Disks"
width="527"
height="632"
loading="lazy"
/>
<p>
Check out the
<a href="black-to-white-disks/remix/index.html">demo</a>
</p>
<h2>LSD</h2>
<p>
Web rendition of the spot painting
<a href="https://www.wikiart.org/en/damien-hirst/lsd">LSD</a> by Damian
Hirst.
</p>
<h3>Original</h3>
<img
src="lsd/img/original.png"
alt="screenshot of LSD"
width="527"
height="434"
loading="lazy"
/>
<p>
Check out the
<a href="lsd/original/index.html">demo</a>
</p>
<h3>Remix</h3>
<img
src="lsd/img/screenshot.gif"
alt="demo of LSD"
width="526"
height="403"
loading="lazy"
/>
<p>
Check out the
<a href="lsd/remix/index.html">demo</a>
</p>
<h2>Shiny book reveal</h2>
<p>
3D hover effect to open a book and reveal a synopsis of the story. I
wanted to try out creating realistic reflections.
</p>
<img
src="shiny-book-reveal/img/demo.gif"
alt="demo of hover effect"
width="470"
height="552"
loading="lazy"
/>
<p>
Check out the
<a href="shiny-book-reveal/index.html">demo</a>
</p>
<h2>Christmas Decoration</h2>
<p>
This an idea for a customisible Christmas decoration. It is like an
accordian of cards. There are different designs on each side, you can fold
them to create different combinations.
</p>
<img
src="christmas-decoration/img/demo.gif"
alt="demo of LSD"
width="600"
height="293"
loading="lazy"
/>
<p>
Check out the
<a href="christmas-decoration/index.html">demo</a>
</p>
<h2>Logo tilt</h2>
<p>
I wanted to try out a goofy idea. I wanted to animate a website’s logo so
that it would fall over when you scroll down, and right itself when you
scroll up. In particular, I wanted the logo to be a head or have a
cartoonish look.
</p>
<p>
I discuss the code behind it in my post,
<a
href="https://www.roboleary.net/frontend/2022/04/13/detect-scroll-direction-vanilla-javascript.html"
>How to detect scroll direction in vanilla JavaScript (to make a goofy
logo animation)</a
>.
</p>
<img
src="logo-tilt/img/demo.gif"
alt="demo of logo tilt"
width="638"
height="604"
loading="lazy"
/>
<p>
Check out the
<a href="logo-tilt/index.html">demo</a>
</p>
<h2>Sin City (Microaction Graphic Novel)</h2>
<p>Add short bursts of action (animation) to a graphic novel.</p>
<img
src="sin-city-microaction-graphic-novel/img/demo.gif"
alt="demo of sin city animation"
width="688"
height="271"
loading="lazy"
/>
<p>
Check out the
<a href="sin-city-microaction-graphic-novel/index.html">demo</a>
</p>
<h2>NES Controller</h2>
<p>
This is a CSS recreation of a NES (Nintendo) game controller. It is an
experiment to see the impact shadows can have on the realism of a design.
You can toggle the shadows on/off to judge for yourself!
</p>
<img
src="nes-controller/img/screenshot.png"
alt="screenshot of nes controller demo"
width="867"
height="443"
loading="lazy"
/>
<p>
Check out the
<a href="nes-controller/index.html">demo</a>
</p>
<h2>Star Wars Circular Wipe Transition</h2>
<p>
CSS animation of the circulr wipe used for scene transitions in Star Wars.
</p>
<img
src="star-wars-circular-wipe/assets/img/demo.webp"
alt="animated demo of circular wipe transition"
width="954"
height="732"
loading="lazy"
/>
<p>
Since the `mask` CSS property is not fully implemented across browsers, I
looked for alternatives that have better support.
</p>
<p>I created 2 versions:</p>
<ol>
<li>
<code>clip-path</code> version: The <code>clip-path</code> property is
the basis of the animation. The transition edges are hard. Check out the
<a href="star-wars-circular-wipe/clippath-version/index.html">demo</a>
</li>
<li>
SVG version: A SVG mask is used. The transition edges are soft. It
applies a
<code>radial-gradient</code> to the mask. Check out the
<a href="star-wars-circular-wipe/svg-version/index.html">demo</a>
</li>
</ol>
<h2>Star Wars - Join the Alliance Recruitment Poster</h2>
<p>Star Wars recruitment poster, sort of.</p>
<img
src="star-wars-join-the-alliance/img/screenshot.gif"
alt="animated demo of Join the Alliance (Star Wars)"
width="396"
height="476"
/>
<p>
Check out the
<a href="star-wars-join-the-alliance/index.html">demo</a>.
</p>
<h2>Bubble text with image background</h2>
<p>
I wanted to see if I could create bubble text with a background image and
a stroked outline. Kind of like fun grafitti.
</p>
<img
src="bubble-text-image-background/img/screenshot.jpg"
alt="screenshot of miami text example of Bubble text with image background"
width="1637"
height="897"
loading="lazy"
/>
<p>
Check out the
<a href="bubble-text-image-background/index.html">demo</a>.
</p>
<h2>Framed content</h2>
<p>
I wanted to see if you can have content with a picture frame as a border.
The border image will be enclose the content whatever the dimensions.
</p>
<p>
I used the <code>border-image</code> family of properties. I use
<code>border-image-repeat: repeat;</code> to handle when the width of the
content is greater than the border image width. This degrades the image
but it looks fine in this case.
</p>
<img
src="framed-content/img/screenshot.png"
alt="screenshot of content with a picture as border image"
loading="lazy"
/>
<p>
Check out the
<a href="framed-content/">demo</a>.
</p>
<h2>Handpuppet blockquote</h2>
<p>
Use <code>shape-outside</code> to have an image of a handpuppet affect
outline of a quotation.
</p>
<img
src="handpuppet-blockquote/img/screenshot.png"
alt="screenshot of quotation"
loading="lazy"
/>
<p>
Check out the
<a href="talk-to-the-hand-quote/">demo</a>.
</p>
<h2>WRDSMTH</h2>
<p>
An interactive playground of the signature artwork of street artist
WRDSMTH. Playing with sound effects to keep pace with fast or slow typing.
</p>
<p>
<a href="https://www.wrdsmth.com/">WRDSMTH</a> is a Los Angeles-based
street artist known for his iconic image of a vintage typewriter featuring
different sheets of inspirational text.
</p>
<img
src="wrdsmth/img/screenshot.jpg"
alt="screenshot of demo"
loading="lazy"
/>
<p>
Check out the
<a href="wrdsmth/">demo</a>.
</p>
<h2>Kafkaesque</h2>
<p>A 3D CSS animation inspired by a quotation from the late, great author Franz Kafka:<blockquote>A book must be the axe for the frozen sea in us</blockquote></p>
<video src="kafkaesque/img/demo.mp4" autoplay loop muted></video>
<p>
Check out the
<a href="kafkaesque/">demo</a>.
</p>
<h2>Scrabble pseudo-typeface</h2>
<p>Creates a pseudo-typeface that changes letters of a paragraph text into scrabble tiles.</p>
<img src="scrabble-typeface/img/screenshot.png" alt="screenshot of demo" width="755" height="586" loading="lazy"/>
<p>
Check out the
<a href="scrabble-typeface/">demo</a>.
</p>
<h2>First rule</h2>
<p>Simple animation riffing on the novel Fight Club's first rule.</p>
<video src="first-rule/img/demo.mp4" autoplay loop muted></video>
<p>
Check out the
<a href="first-rule/">demo</a>.
</p>
<h2>Don't let the bastards grind you down (June poster)</h2>
<p>A poster inspired by the phrase from the book <a href="https://en.wikipedia.org/wiki/The_Handmaid%27s_Tale">The Handmaid's Tale</a>.</p>
<img src="june-poster/img/screenshot.png" alt="screenshot of demo" width="413" height="578" loading="lazy"/>
<p>
Check out the
<a href="june-poster/">demo</a>.
</p>
<h2>Witchin' masks</h2>
<p>A Halloween themed design with bats and a transmuting cat. Animated images can be used as a mask to create an animated element, and you can apply custom styles to the element to create interesting silhouettes.</p>
<video src="witchin-masks/img/demo.mp4" autoplay loop muted></video>
<p>
Check out the
<a href="witchin-masks/">demo</a>.
</p>
<h2>Consolesque marqueeish text</h2>
<p>I wanted to play with the idea of showcasing my name within a console.</p>
<video src="consolesque-marqueeish-text/img/demo.mp4" autoplay muted loop style="max-width:500px;"></video>
<p>
Check out the
<a href="consolesque-marqueeish-text/">demo</a>.
</p>
<h2>Snippets Ranger Loader</h2>
<p>This is a loading animation for a VS Code extension I wrote called <a href="https://marketplace.visualstudio.com/items?itemName=robole.snippets-ranger">Snippets Ranger</a>.</p>
<img src="/snippets-ranger-loader/img/screenshot.png" alt="screenshot of snippets ranger loader. It is a pink hero on a rocket horse with a rotating stripey background">
<p>
Check out the
<a href="snippets-ranger-loader/">demo</a>.
</p>
<h2>Christmas Patterns</h2>
<p>Simple geometric christmas patterns, animated for maximuim candy. Playing around with CSS gradients and SVG <code>pattern</code> and <code>symbol</code> elements to create different types of patterns.</p>
<img src="/christmas-patterns/img/screenshot.png" alt="screenshot of christmas patterns card. It is a grid of various patterns animated. Patterns such as candy cane stripe, a wavy white and brown pattern that resembles a christmas pudding with cream on top, and so on.">
<p>Check out the <a href="christmas-patterns/">demo</a>.</p>
<h2>Football drop animation</h2>
<p>This CSS animation of a football being dropped and bouncing a few times uses an <em>easeOutBounce</em> easing created with <code>linear()</code>. The <code>@keyframes</code> is very, very simple! 🙏</p>
<img src="football-drop-animation/img/screenshot.png" alt="screenshot of Football drop animation. A photorealistic football is falls from above and hits the ground, bouncing 3 times before coming to a rest.">
<p>Check out the <a href="football-drop-animation/">demo</a>.</p>
</body>
</html>