Skip to content

Commit 65cfef1

Browse files
g-harelg-harel
committed
promote animated demo page
1 parent 3221263 commit 65cfef1

File tree

2 files changed

+89
-174
lines changed

2 files changed

+89
-174
lines changed

‎index.animated.html‎

Lines changed: 0 additions & 130 deletions
This file was deleted.

‎index.html‎

Lines changed: 89 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
66
<title>blobs</title>
7-
<script src="https://unpkg.com/blobs/v2"></script>
7+
<script src="https://unpkg.com/blobs@2.1.0-beta.1/v2/animate/index.js"></script>
88
<meta property="og:url" content="https://blobs.dev" />
99
<meta property="og:type" content="website" />
1010
<meta property="og:title" content="blobs" />
@@ -13,73 +13,118 @@
1313
</head>
1414
<body>
1515
<style>
16-
html {
16+
html,
17+
body,
18+
main {
1719
height: 100%;
1820
width: 100%;
19-
}
20-
21-
body {
22-
align-items: center;
23-
display: flex;
24-
flex-direction: column;
25-
height: 100%;
26-
justify-content: space-between;
2721
margin: 0;
28-
width: 100%;
2922
}
3023

3124
header {
32-
padding-top: 3rem;
33-
}
34-
35-
#blob svg path {
36-
cursor: pointer;
37-
}
38-
39-
footer {
40-
padding: calc(2rem + 10vw) 0 2rem;
25+
padding-top: 2rem;
26+
position: fixed;
27+
top: 0;
28+
text-align: center;
29+
width: 100%;
4130
}
4231

43-
footer a {
32+
a {
4433
color: #aaa;
34+
display: inline-block;
4535
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
4636
Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
47-
font-weight: 600;
48-
margin: 0 1rem;
37+
font-weight: 700;
38+
padding: 1rem;
4939
text-decoration: none;
40+
user-select: none;
41+
}
42+
43+
main {
44+
align-items: center;
45+
display: flex;
46+
justify-content: center;
47+
}
48+
49+
main canvas {
50+
cursor: pointer;
5051
}
5152
</style>
5253

5354
<header>
54-
<a href="http://github.com/g-harel/blobs">
55-
<img width="200" src="./assets/logo-grey.svg" />
56-
</a>
55+
<a
56+
href="mailto:gabrielj.harel@gmail.com"
57+
style="transform: rotate(1deg) translateY(3px);"
58+
>CONTACT</a
59+
>
60+
<a
61+
href="https://npmjs.com/package/blobs"
62+
style="transform: rotate(-2deg) translateY(-1px);"
63+
>NPM</a
64+
>
65+
<a
66+
href="https://github.com/g-harel/blobs"
67+
style="transform: rotate(4deg) translateY(1px);"
68+
>GITHUB</a
69+
>
5770
</header>
5871

59-
<main id="blob" onclick="refresh()"></main>
60-
61-
<footer>
62-
<a href="mailto:gabrielj.harel@gmail.com">contact</a>
63-
<a href="https://github.com/g-harel/blobs">github</a>
64-
<a href="https://npmjs.com/package/blobs">npm</a>
65-
</footer>
72+
<main>
73+
<canvas id="canvas"></canvas>
74+
</main>
6675

6776
<script>
68-
var mobileElem = document.getElementById("blob");
77+
// Set blob size relative to window, but limit to 600.
78+
const size = Math.min(600, window.innerWidth - 64);
6979

70-
function refresh() {
71-
if (!mobileElem) return;
72-
console.log(window.innerWidth);
80+
// Fetch reference to canvas and resize dynamically.
81+
const canvas = document.getElementById("canvas");
82+
canvas.width = size;
83+
canvas.height = size;
7384

74-
mobileElem.innerHTML = blobs2.svg({
85+
// Set blob color and set context to erase intersection of content.
86+
const ctx = canvas.getContext("2d");
87+
ctx.fillStyle = "#ec576b";
88+
ctx.globalCompositeOperation = "xor";
89+
90+
// Use logo word asset to cut out from the generated blob.
91+
const logoWord = new Image();
92+
logoWord.src = "./assets/logo.svg";
93+
94+
// Create animation and draw its frames in `requestAnimationFrame` callbacks.
95+
const animation = blobs2Animate.canvasPath();
96+
const renderFrame = () => {
97+
ctx.clearRect(0, 0, size, size);
98+
ctx.drawImage(logoWord, size / 10, size / 10, (size * 4) / 5, (size * 4) / 5);
99+
ctx.fill(animation.renderFrame());
100+
requestAnimationFrame(renderFrame);
101+
};
102+
requestAnimationFrame(renderFrame);
103+
104+
// Generate a keyframe with overridable default values.
105+
const genFrame = (overrides) => ({
106+
duration: 4000,
107+
timingFunction: "ease",
108+
callback: loopAnimation,
109+
blobOptions: {
110+
extraPoints: 3,
111+
randomness: 4,
75112
seed: Math.random(),
76-
extraPoints: 4,
77-
randomness: 6,
78-
size: Math.min(600, window.innerWidth - 100),
79-
});
80-
}
113+
size: size,
114+
},
115+
...overrides,
116+
});
117+
118+
// Callback for every frame which starts transition to a new frame.
119+
const loopAnimation = () => animation.transition(genFrame());
120+
121+
// Immediately show a shape.
122+
animation.transition(genFrame({duration: 0}));
81123

82-
refresh();
124+
// Quickly animate to a new frame when canvas is clicked.
125+
canvas.onclick = () => {
126+
animation.transition(genFrame({duration: 400, timingFunction: "elasticEnd0"}));
127+
};
83128
</script>
84129
</body>
85130
</html>

0 commit comments

Comments
 (0)