@andresclua/perlindom 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PerlinDOM.es.js +98 -0
- package/dist/PerlinDOM.umd.js +1 -0
- package/docs/examples.html +385 -0
- package/package.json +33 -0
- package/public/vite.svg +1 -0
- package/readme.md +271 -0
- package/src/examples.html +515 -0
- package/src/index.html +655 -0
- package/src/js/PerlinDom.js +215 -0
- package/src/js/PerlinSVG.js +190 -0
- package/src/js/animated-button.js +40 -0
- package/src/js/basic-examples.js +43 -0
- package/src/js/index.js +13 -0
- package/src/js/interactive-controls.js +43 -0
- package/src/js/pause-play.js +33 -0
- package/src/js/triangle-animation.js +48 -0
- package/src/scss/style.scss +20 -0
- package/vite.config.js +36 -0
package/src/index.html
ADDED
|
@@ -0,0 +1,655 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>PerlinDom - by Andres Clua</title>
|
|
8
|
+
|
|
9
|
+
<link rel="stylesheet" href="https://unpkg.com/@terrahq/design-system@latest/dist/style.css" />
|
|
10
|
+
|
|
11
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
12
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
13
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
14
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
15
|
+
<link href="https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
|
|
16
|
+
<link rel="stylesheet" href="./scss/style.scss" />
|
|
17
|
+
<style>
|
|
18
|
+
body {
|
|
19
|
+
font-family: 'Arial', sans-serif;
|
|
20
|
+
line-height: 1.6;
|
|
21
|
+
color: #333;
|
|
22
|
+
max-width: 1200px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
padding: 20px;
|
|
25
|
+
background-color: #f0f0f0;
|
|
26
|
+
overflow-x: hidden;
|
|
27
|
+
overflow: visible!important;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h1, h2 {
|
|
31
|
+
color: #2c3e50;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.example-container {
|
|
35
|
+
margin-bottom: 40px;
|
|
36
|
+
border: 1px solid #ddd;
|
|
37
|
+
border-radius: 8px;
|
|
38
|
+
padding: 20px;
|
|
39
|
+
position: relative;
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
height: 300px;
|
|
42
|
+
background-color: #f9f9f9;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.code-block {
|
|
46
|
+
background-color: #f5f5f5;
|
|
47
|
+
padding: 15px;
|
|
48
|
+
border-radius: 5px;
|
|
49
|
+
overflow-x: auto;
|
|
50
|
+
margin-bottom: 20px;
|
|
51
|
+
font-family: monospace;
|
|
52
|
+
font-size: 14px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Example 1: Basic Animation */
|
|
56
|
+
.basic-element {
|
|
57
|
+
width: 80px;
|
|
58
|
+
height: 80px;
|
|
59
|
+
background-color: #3498db;
|
|
60
|
+
border-radius: 50%;
|
|
61
|
+
position: absolute;
|
|
62
|
+
left: calc(50% - 40px); /* 50% - half width */
|
|
63
|
+
top: calc(50% - 40px); /* 50% - half height */
|
|
64
|
+
filter: blur(5px);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Example 2: Horizontal Only */
|
|
68
|
+
.horizontal-element {
|
|
69
|
+
width: 60px;
|
|
70
|
+
height: 60px;
|
|
71
|
+
background-color: #e74c3c;
|
|
72
|
+
border-radius: 10px;
|
|
73
|
+
position: absolute;
|
|
74
|
+
left: calc(50% - 30px); /* 50% - half width */
|
|
75
|
+
top: calc(50% - 30px); /* 50% - half height */
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Example 3: Multiple Elements */
|
|
79
|
+
.particle {
|
|
80
|
+
width: 230px;
|
|
81
|
+
height: 230px;
|
|
82
|
+
background:linear-gradient(to bottom right, #8e44ad, #3498db);
|
|
83
|
+
border-radius: 50%;
|
|
84
|
+
position: absolute;
|
|
85
|
+
/* opacity: 0.2; */
|
|
86
|
+
filter: blur(10px);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Example 4: Background Effect */
|
|
90
|
+
.bg-container {
|
|
91
|
+
background-color: #34495e;
|
|
92
|
+
position: relative;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.bg-element {
|
|
96
|
+
position: absolute;
|
|
97
|
+
border-radius: 50%;
|
|
98
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
99
|
+
filter: blur(5px);
|
|
100
|
+
transform: scale(3.2);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.bg-element-1 {
|
|
104
|
+
width: 100px;
|
|
105
|
+
height: 100px;
|
|
106
|
+
left: 20%;
|
|
107
|
+
top: 30%;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.bg-element-2 {
|
|
111
|
+
width: 150px;
|
|
112
|
+
height: 150px;
|
|
113
|
+
left: 60%;
|
|
114
|
+
top: 50%;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.bg-element-3 {
|
|
118
|
+
width: 80px;
|
|
119
|
+
height: 80px;
|
|
120
|
+
left: 40%;
|
|
121
|
+
top: 70%;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.content {
|
|
125
|
+
position: relative;
|
|
126
|
+
z-index: 10;
|
|
127
|
+
color: white;
|
|
128
|
+
text-align: center;
|
|
129
|
+
padding-top: 120px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Example 5: Pause Play Element */
|
|
133
|
+
.pause-play-container {
|
|
134
|
+
position: relative;
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
height: 200px;
|
|
137
|
+
border: 1px dashed #ccc;
|
|
138
|
+
border-radius: 8px;
|
|
139
|
+
margin-top: 20px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.pause-play-element {
|
|
143
|
+
width: 70px;
|
|
144
|
+
height: 70px;
|
|
145
|
+
background-color: #f39c12;
|
|
146
|
+
border-radius: 50%;
|
|
147
|
+
position: absolute;
|
|
148
|
+
left: calc(50% - 35px);
|
|
149
|
+
top: calc(50% - 35px);
|
|
150
|
+
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.status-display {
|
|
154
|
+
position: absolute;
|
|
155
|
+
bottom: 20px;
|
|
156
|
+
left: 0;
|
|
157
|
+
width: 100%;
|
|
158
|
+
text-align: center;
|
|
159
|
+
font-weight: bold;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.status-indicator {
|
|
163
|
+
color: #2980b9;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.instruction {
|
|
167
|
+
font-size: 14px;
|
|
168
|
+
color: #7f8c8d;
|
|
169
|
+
margin-top: 5px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.pause-play-settings {
|
|
173
|
+
margin-bottom: 20px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.setting-description {
|
|
177
|
+
font-size: 12px;
|
|
178
|
+
color: #7f8c8d;
|
|
179
|
+
margin-top: 5px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.lerp-value {
|
|
183
|
+
font-weight: bold;
|
|
184
|
+
color: #e67e22;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Example 6: Interactive Element */
|
|
188
|
+
.interactive-container {
|
|
189
|
+
display: flex;
|
|
190
|
+
justify-content: space-between;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.controls {
|
|
194
|
+
width: 40%;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.preview {
|
|
198
|
+
width: 55%;
|
|
199
|
+
height: 200px;
|
|
200
|
+
border: 1px solid #ddd;
|
|
201
|
+
border-radius: 5px;
|
|
202
|
+
position: relative;
|
|
203
|
+
overflow: hidden;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.interactive-element {
|
|
207
|
+
width: 50px;
|
|
208
|
+
height: 50px;
|
|
209
|
+
background-color: #9b59b6;
|
|
210
|
+
border-radius: 50%;
|
|
211
|
+
position: absolute;
|
|
212
|
+
left: calc(50% - 25px); /* 50% - half width */
|
|
213
|
+
top: calc(50% - 25px); /* 50% - half height */
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.control-group {
|
|
217
|
+
margin-bottom: 15px;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
label {
|
|
221
|
+
display: block;
|
|
222
|
+
margin-bottom: 5px;
|
|
223
|
+
font-weight: bold;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
input[type="range"] {
|
|
227
|
+
width: 100%;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.value-display {
|
|
231
|
+
font-size: 12px;
|
|
232
|
+
color: #666;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.container {
|
|
236
|
+
display: flex;
|
|
237
|
+
flex-direction: column;
|
|
238
|
+
align-items: center;
|
|
239
|
+
justify-content: center;
|
|
240
|
+
text-align: center;
|
|
241
|
+
margin-bottom: 40px;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.instructions {
|
|
245
|
+
position: fixed;
|
|
246
|
+
bottom: 20px;
|
|
247
|
+
left: 0;
|
|
248
|
+
right: 0;
|
|
249
|
+
text-align: center;
|
|
250
|
+
color: white;
|
|
251
|
+
font-size: 1.2rem;
|
|
252
|
+
z-index: 10;
|
|
253
|
+
text-shadow: 0 0 5px rgba(0,0,0,0.5);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* Example 7: Animated Button with Circles */
|
|
257
|
+
.animated-button-container {
|
|
258
|
+
display: flex;
|
|
259
|
+
justify-content: center;
|
|
260
|
+
align-items: center;
|
|
261
|
+
height: 100%;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.animated-button {
|
|
265
|
+
position: relative;
|
|
266
|
+
display: inline-block;
|
|
267
|
+
padding: 15px 30px;
|
|
268
|
+
background-color: #3498db;
|
|
269
|
+
color: white;
|
|
270
|
+
text-decoration: none;
|
|
271
|
+
font-weight: bold;
|
|
272
|
+
border-radius: 5px;
|
|
273
|
+
overflow: visible;
|
|
274
|
+
transition: background-color 0.3s;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.animated-button:hover {
|
|
278
|
+
background-color: #2980b9;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.animated-button .circle {
|
|
282
|
+
position: absolute;
|
|
283
|
+
width: 60px;
|
|
284
|
+
height: 60px;
|
|
285
|
+
background-color:#3498db;
|
|
286
|
+
border-radius: 50%;
|
|
287
|
+
opacity: 0;
|
|
288
|
+
transition: opacity 0.3s;
|
|
289
|
+
pointer-events: none;
|
|
290
|
+
filter: blur(19px);
|
|
291
|
+
z-index: 1;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.animated-button:hover .circle {
|
|
295
|
+
opacity: 1;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.animated-button .circle:nth-child(1) {
|
|
299
|
+
left: -15px;
|
|
300
|
+
top: 50%;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.animated-button .circle:nth-child(2) {
|
|
304
|
+
left: 50%;
|
|
305
|
+
top: -15px;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.animated-button .circle:nth-child(3) {
|
|
309
|
+
right: -15px;
|
|
310
|
+
top: 50%;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.animated-button .circle:nth-child(4) {
|
|
314
|
+
left: 50%;
|
|
315
|
+
bottom: -15px;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.animated-button .button-text {
|
|
319
|
+
position: relative;
|
|
320
|
+
z-index: 10;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
/* Example 8: ClipPath Triangle with Animated Vertex */
|
|
324
|
+
.triangle-container {
|
|
325
|
+
display: flex;
|
|
326
|
+
justify-content: center;
|
|
327
|
+
align-items: center;
|
|
328
|
+
height: 100%;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.triangle-svg {
|
|
332
|
+
width: 300px;
|
|
333
|
+
height: 300px;
|
|
334
|
+
overflow: visible;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.triangle-content {
|
|
338
|
+
width: 100%;
|
|
339
|
+
height: 100%;
|
|
340
|
+
background: linear-gradient(135deg, #3498db, #e74c3c, #9b59b6);
|
|
341
|
+
animation: gradientShift 10s ease infinite;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
@keyframes gradientShift {
|
|
345
|
+
0% { background-position: 0% 50%; }
|
|
346
|
+
50% { background-position: 100% 50%; }
|
|
347
|
+
100% { background-position: 0% 50%; }
|
|
348
|
+
}
|
|
349
|
+
</style>
|
|
350
|
+
</head>
|
|
351
|
+
|
|
352
|
+
<body>
|
|
353
|
+
|
|
354
|
+
|
|
355
|
+
<div class="container">
|
|
356
|
+
<h1>PerlinSVG Example</h1>
|
|
357
|
+
</div>
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
<h1>PerlinDOM Examples</h1>
|
|
361
|
+
<p>This page demonstrates various ways to use the PerlinDOM library for creating smooth, organic animations.</p>
|
|
362
|
+
|
|
363
|
+
<!-- Example 1: Basic Animation -->
|
|
364
|
+
<h2>1. Basic Animation</h2>
|
|
365
|
+
<div class="code-block">
|
|
366
|
+
const basicAnimation = new PerlinDOM({<br>
|
|
367
|
+
element: document.querySelector('.basic-element'),<br>
|
|
368
|
+
x: { min: -50, max: 50 },<br>
|
|
369
|
+
y: { min: -50, max: 50 },<br>
|
|
370
|
+
speed: 0.01,<br>
|
|
371
|
+
seed: 123<br>
|
|
372
|
+
});
|
|
373
|
+
</div>
|
|
374
|
+
<div class="example-container">
|
|
375
|
+
<div class="basic-element"></div>
|
|
376
|
+
</div>
|
|
377
|
+
|
|
378
|
+
<!-- Example 2: Horizontal Only -->
|
|
379
|
+
<h2>2. Horizontal-Only Movement</h2>
|
|
380
|
+
<div class="code-block">
|
|
381
|
+
const horizontalAnimation = new PerlinDOM({<br>
|
|
382
|
+
element: document.querySelector('.horizontal-element'),<br>
|
|
383
|
+
x: { min: -100, max: 100 },<br>
|
|
384
|
+
y: null, // No vertical movement<br>
|
|
385
|
+
speed: 0.02<br>
|
|
386
|
+
});
|
|
387
|
+
</div>
|
|
388
|
+
<div class="example-container">
|
|
389
|
+
<div class="horizontal-element"></div>
|
|
390
|
+
</div>
|
|
391
|
+
|
|
392
|
+
<!-- Example 3: Multiple Elements -->
|
|
393
|
+
<h2>3. Multiple Elements with Different Seeds</h2>
|
|
394
|
+
<div class="code-block">
|
|
395
|
+
document.querySelectorAll('.particle').forEach((el, index) => {<br>
|
|
396
|
+
new PerlinDOM({<br>
|
|
397
|
+
element: el,<br>
|
|
398
|
+
x: { min: -100, max: 100 },<br>
|
|
399
|
+
y: { min: -100, max: 100 },<br>
|
|
400
|
+
speed: 0.01,<br>
|
|
401
|
+
seed: index * 100 // Different seed for each element<br>
|
|
402
|
+
});<br>
|
|
403
|
+
});
|
|
404
|
+
</div>
|
|
405
|
+
<div class="example-container">
|
|
406
|
+
<div class="particle" style="left: 30%; top: 30%"></div>
|
|
407
|
+
<div class="particle" style="left: 50%; top: 50%"></div>
|
|
408
|
+
<div class="particle" style="left: 70%; top: 70%"></div>
|
|
409
|
+
<div class="particle" style="left: 30%; top: 70%"></div>
|
|
410
|
+
<div class="particle" style="left: 70%; top: 30%"></div>
|
|
411
|
+
</div>
|
|
412
|
+
|
|
413
|
+
<!-- Example 4: Background Effect -->
|
|
414
|
+
<h2>4. Creating a Background Effect</h2>
|
|
415
|
+
<div class="code-block">
|
|
416
|
+
document.querySelectorAll('.bg-element').forEach(el => {<br>
|
|
417
|
+
new PerlinDOM({<br>
|
|
418
|
+
element: el,<br>
|
|
419
|
+
x: { min: -10, max: 10 },<br>
|
|
420
|
+
y: { min: -10, max: 10 },<br>
|
|
421
|
+
speed: 0.002, // Very slow movement<br>
|
|
422
|
+
seed: Math.random() * 2000<br>
|
|
423
|
+
});<br>
|
|
424
|
+
});
|
|
425
|
+
</div>
|
|
426
|
+
<div class="example-container bg-container">
|
|
427
|
+
<div class="bg-element bg-element-1"></div>
|
|
428
|
+
<div class="bg-element bg-element-2"></div>
|
|
429
|
+
<div class="bg-element bg-element-3"></div>
|
|
430
|
+
<div class="content">
|
|
431
|
+
<h3>Subtle Background Animation</h3>
|
|
432
|
+
<p>Perfect for creating depth in UI elements</p>
|
|
433
|
+
</div>
|
|
434
|
+
</div>
|
|
435
|
+
|
|
436
|
+
<!-- Example 5: Pause and Play with Mouse Events -->
|
|
437
|
+
<h2>5. Smooth Pause and Play with Mouse Events</h2>
|
|
438
|
+
<div class="code-block">
|
|
439
|
+
const pausePlayAnimation = new PerlinDOM({<br>
|
|
440
|
+
element: document.querySelector('.pause-play-element'),<br>
|
|
441
|
+
x: { min: -80, max: 80 },<br>
|
|
442
|
+
y: { min: -80, max: 80 },<br>
|
|
443
|
+
speed: 0.01,<br>
|
|
444
|
+
seed: 42,<br>
|
|
445
|
+
lerpSpeed: 0.05 // Controls how smooth the transition is<br>
|
|
446
|
+
});<br><br>
|
|
447
|
+
|
|
448
|
+
// Pause on mouse leave<br>
|
|
449
|
+
document.querySelector('.pause-play-container').addEventListener('mouseleave', () => {<br>
|
|
450
|
+
pausePlayAnimation.pause();<br>
|
|
451
|
+
document.querySelector('.status-indicator').textContent = 'Pausing...';<br>
|
|
452
|
+
});<br><br>
|
|
453
|
+
|
|
454
|
+
// Play on mouse enter<br>
|
|
455
|
+
document.querySelector('.pause-play-container').addEventListener('mouseenter', () => {<br>
|
|
456
|
+
pausePlayAnimation.play();<br>
|
|
457
|
+
document.querySelector('.status-indicator').textContent = 'Playing...';<br>
|
|
458
|
+
});<br><br>
|
|
459
|
+
|
|
460
|
+
// Update lerpSpeed when slider changes<br>
|
|
461
|
+
document.getElementById('lerp-speed').addEventListener('input', (e) => {<br>
|
|
462
|
+
const newSpeed = parseFloat(e.target.value);<br>
|
|
463
|
+
pausePlayAnimation.lerpSpeed = newSpeed;<br>
|
|
464
|
+
document.querySelector('.lerp-value').textContent = newSpeed.toFixed(2);<br>
|
|
465
|
+
});
|
|
466
|
+
</div>
|
|
467
|
+
<div class="example-container">
|
|
468
|
+
<div class="pause-play-settings">
|
|
469
|
+
<label for="lerp-speed">Transition Speed: <span class="lerp-value">0.05</span></label>
|
|
470
|
+
<input type="range" id="lerp-speed" min="0.01" max="0.2" step="0.01" value="0.05">
|
|
471
|
+
<p class="setting-description">Lower values = smoother, slower transitions</p>
|
|
472
|
+
</div>
|
|
473
|
+
<div class="pause-play-container">
|
|
474
|
+
<div class="pause-play-element"></div>
|
|
475
|
+
<div class="status-display">
|
|
476
|
+
Status: <span class="status-indicator">Playing</span>
|
|
477
|
+
<p class="instruction">Hover over this orange circle to play, move mouse out to pause</p>
|
|
478
|
+
</div>
|
|
479
|
+
</div>
|
|
480
|
+
</div>
|
|
481
|
+
|
|
482
|
+
<!-- Example 6: Interactive Controls -->
|
|
483
|
+
<h2>6. Interactive Controls</h2>
|
|
484
|
+
<div class="code-block">
|
|
485
|
+
// Create the animation with initial settings<br>
|
|
486
|
+
const interactiveAnimation = new PerlinDOM({<br>
|
|
487
|
+
element: document.querySelector('.interactive-element'),<br>
|
|
488
|
+
x: { min: -50, max: 50 },<br>
|
|
489
|
+
y: { min: -50, max: 50 },<br>
|
|
490
|
+
speed: 0.01,<br>
|
|
491
|
+
seed: 0<br>
|
|
492
|
+
});<br><br>
|
|
493
|
+
|
|
494
|
+
// Update settings based on user input<br>
|
|
495
|
+
speedControl.addEventListener('input', () => {<br>
|
|
496
|
+
// Stop current animation<br>
|
|
497
|
+
interactiveAnimation.destroy();<br>
|
|
498
|
+
<br>
|
|
499
|
+
// Reinitialize with new settings<br>
|
|
500
|
+
interactiveAnimation.speed = parseFloat(speedControl.value);<br>
|
|
501
|
+
interactiveAnimation.init(seedControl.value);<br>
|
|
502
|
+
});
|
|
503
|
+
</div>
|
|
504
|
+
<div class="example-container">
|
|
505
|
+
<div class="interactive-container">
|
|
506
|
+
<div class="controls">
|
|
507
|
+
<div class="control-group">
|
|
508
|
+
<label for="x-range">X Range:</label>
|
|
509
|
+
<input type="range" id="x-range" min="0" max="100" value="50">
|
|
510
|
+
<div class="value-display">-50 to 50</div>
|
|
511
|
+
</div>
|
|
512
|
+
|
|
513
|
+
<div class="control-group">
|
|
514
|
+
<label for="y-range">Y Range:</label>
|
|
515
|
+
<input type="range" id="y-range" min="0" max="100" value="50">
|
|
516
|
+
<div class="value-display">-50 to 50</div>
|
|
517
|
+
</div>
|
|
518
|
+
|
|
519
|
+
<div class="control-group">
|
|
520
|
+
<label for="speed">Speed:</label>
|
|
521
|
+
<input type="range" id="speed" min="0.001" max="0.05" step="0.001" value="0.01">
|
|
522
|
+
<div class="value-display">0.01</div>
|
|
523
|
+
</div>
|
|
524
|
+
|
|
525
|
+
<div class="control-group">
|
|
526
|
+
<label for="seed">Seed:</label>
|
|
527
|
+
<input type="range" id="seed" min="0" max="1000" step="1" value="0">
|
|
528
|
+
<div class="value-display">0</div>
|
|
529
|
+
</div>
|
|
530
|
+
</div>
|
|
531
|
+
|
|
532
|
+
<div class="preview">
|
|
533
|
+
<div class="interactive-element"></div>
|
|
534
|
+
</div>
|
|
535
|
+
</div>
|
|
536
|
+
</div>
|
|
537
|
+
|
|
538
|
+
<!-- Example 7: Animated Button with Circles -->
|
|
539
|
+
<h2>7. Animated Button with Circles on Hover</h2>
|
|
540
|
+
<div class="code-block">
|
|
541
|
+
// Get all the circle elements inside the button<br>
|
|
542
|
+
const circleElements = document.querySelectorAll('.animated-button .circle');<br><br>
|
|
543
|
+
|
|
544
|
+
// Create an array to store the animation instances<br>
|
|
545
|
+
let circleAnimations = [];<br><br>
|
|
546
|
+
|
|
547
|
+
// Function to initialize animations<br>
|
|
548
|
+
function initCircleAnimations() {<br>
|
|
549
|
+
// Clear any existing animations<br>
|
|
550
|
+
circleAnimations.forEach(anim => anim.destroy());<br>
|
|
551
|
+
circleAnimations = [];<br><br>
|
|
552
|
+
|
|
553
|
+
// Create new animations for each circle<br>
|
|
554
|
+
circleElements.forEach((el, index) => {<br>
|
|
555
|
+
const animation = new PerlinDOM({<br>
|
|
556
|
+
element: el,<br>
|
|
557
|
+
x: { min: -15, max: 15 },<br>
|
|
558
|
+
y: { min: -15, max: 15 },<br>
|
|
559
|
+
speed: 0.03,<br>
|
|
560
|
+
seed: index * 1000,<br>
|
|
561
|
+
lerpSpeed: 0.1<br>
|
|
562
|
+
});<br>
|
|
563
|
+
circleAnimations.push(animation);<br>
|
|
564
|
+
});<br>
|
|
565
|
+
}<br><br>
|
|
566
|
+
|
|
567
|
+
// Add event listeners to the button<br>
|
|
568
|
+
document.querySelector('.animated-button').addEventListener('mouseenter', () => {<br>
|
|
569
|
+
initCircleAnimations();<br>
|
|
570
|
+
circleAnimations.forEach(anim => anim.play());<br>
|
|
571
|
+
});<br><br>
|
|
572
|
+
|
|
573
|
+
document.querySelector('.animated-button').addEventListener('mouseleave', () => {<br>
|
|
574
|
+
circleAnimations.forEach(anim => anim.pause());<br>
|
|
575
|
+
});
|
|
576
|
+
</div>
|
|
577
|
+
<div class="example-container">
|
|
578
|
+
<div class="animated-button-container">
|
|
579
|
+
<a href="#" class="animated-button">
|
|
580
|
+
<span class="circle"></span>
|
|
581
|
+
<span class="circle"></span>
|
|
582
|
+
<span class="circle"></span>
|
|
583
|
+
<span class="circle"></span>
|
|
584
|
+
<span class="button-text">Button Text</span>
|
|
585
|
+
</a>
|
|
586
|
+
</div>
|
|
587
|
+
</div>
|
|
588
|
+
|
|
589
|
+
<!-- Example 8: ClipPath Triangle with Animated Vertex -->
|
|
590
|
+
<h2>8. ClipPath Triangle with Animated Vertex</h2>
|
|
591
|
+
<div class="code-block">
|
|
592
|
+
// Get the polygon element<br>
|
|
593
|
+
const trianglePath = document.getElementById('trianglePath');<br><br>
|
|
594
|
+
|
|
595
|
+
// Store the original points<br>
|
|
596
|
+
const originalPoints = {<br>
|
|
597
|
+
x1: 150, y1: 50, // Top vertex<br>
|
|
598
|
+
x2: 250, y2: 250, // Bottom right<br>
|
|
599
|
+
x3: 50, y3: 250 // Bottom left<br>
|
|
600
|
+
};<br><br>
|
|
601
|
+
|
|
602
|
+
// Create a custom animation function<br>
|
|
603
|
+
function animateTriangle() {<br>
|
|
604
|
+
// Create a PerlinDOM instance for the top vertex<br>
|
|
605
|
+
const topVertexAnimation = new PerlinDOM({<br>
|
|
606
|
+
element: null, // We're not moving a DOM element directly<br>
|
|
607
|
+
x: { min: -30, max: 30 },<br>
|
|
608
|
+
y: { min: -20, max: 20 },<br>
|
|
609
|
+
speed: 0.005,<br>
|
|
610
|
+
seed: 42<br>
|
|
611
|
+
});<br><br>
|
|
612
|
+
|
|
613
|
+
// Animation function<br>
|
|
614
|
+
function updateTriangle() {<br>
|
|
615
|
+
// Get the current noise values<br>
|
|
616
|
+
const offsetX = topVertexAnimation.lastX;<br>
|
|
617
|
+
const offsetY = topVertexAnimation.lastY;<br><br>
|
|
618
|
+
|
|
619
|
+
// Update the polygon points<br>
|
|
620
|
+
const newPoints = `${originalPoints.x1 + offsetX},${originalPoints.y1 + offsetY} ${originalPoints.x2},${originalPoints.y2} ${originalPoints.x3},${originalPoints.y3}`;<br>
|
|
621
|
+
trianglePath.setAttribute('points', newPoints);<br><br>
|
|
622
|
+
|
|
623
|
+
// Continue animation<br>
|
|
624
|
+
requestAnimationFrame(updateTriangle);<br>
|
|
625
|
+
}<br><br>
|
|
626
|
+
|
|
627
|
+
// Start the animation<br>
|
|
628
|
+
updateTriangle();<br>
|
|
629
|
+
}<br><br>
|
|
630
|
+
|
|
631
|
+
// Initialize the animation<br>
|
|
632
|
+
animateTriangle();
|
|
633
|
+
</div>
|
|
634
|
+
<div class="example-container">
|
|
635
|
+
<div class="triangle-container">
|
|
636
|
+
<svg class="triangle-svg" viewBox="0 0 300 300">
|
|
637
|
+
<defs>
|
|
638
|
+
<clipPath id="triangleClip">
|
|
639
|
+
<polygon id="trianglePath" points="150,50 250,250 50,250"></polygon>
|
|
640
|
+
</clipPath>
|
|
641
|
+
</defs>
|
|
642
|
+
<rect class="triangle-content" width="300" height="300" clip-path="url(#triangleClip)"></rect>
|
|
643
|
+
</svg>
|
|
644
|
+
</div>
|
|
645
|
+
</div>
|
|
646
|
+
|
|
647
|
+
<!-- Load all scripts -->
|
|
648
|
+
<script type="module" src="./js/index.js"></script>
|
|
649
|
+
<script type="module" src="./js/basic-examples.js"></script>
|
|
650
|
+
<script type="module" src="./js/pause-play.js"></script>
|
|
651
|
+
<script type="module" src="./js/interactive-controls.js"></script>
|
|
652
|
+
<script type="module" src="./js/animated-button.js"></script>
|
|
653
|
+
<script type="module" src="./js/triangle-animation.js"></script>
|
|
654
|
+
</body>
|
|
655
|
+
</html>
|