flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/text_effect_fluid. cool text fluid effect for your website
flo-bit.dev/text_effect_fluid/
fluid-dynamics
javascript
template
text-effects
move to center, fix mobile version
author
Florian
date
(Jan 18, 2024, 8:39 PM +0100)
commit
c33d8673
c33d86734d7cfd79166a7380e6a22fa1097319e4
parent
ffaab691
ffaab6919de1725b8f78bfcc1a262f57fd6f2e78
+58
-48
+1
index.html
+1
index.html
+57
-48
script.js
+57
-48
script.js
···
28
28
text: 'flo-bit',
29
29
fontWidth: '900',
30
30
font: 'Arial',
31
-
fontSize: 1/6, // percentage to canvas width
31
+
fontSize: 1/3, // percentage to canvas width
32
32
}
33
33
34
34
// overlay canvas
···
49
49
overlayCanvas.height = rect.height * dpr;
50
50
ctx.scale(dpr, dpr);
51
51
52
-
// Redraw the content
53
52
ctx.fillStyle = 'black';
54
53
ctx.fillRect(0, 0, overlayCanvas.width, overlayCanvas.height);
55
54
56
-
let fontSize = Math.round(overlayCanvas.width / 6);
57
-
ctx.font = '900 ' + fontSize + 'px Arial';
55
+
let fontSize = Math.round(rect.width * overlayConfig.fontSize);
56
+
ctx.font = overlayConfig.fontWidth + ' ' + fontSize + 'px ' + overlayConfig.font;
58
57
59
58
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
60
59
ctx.lineWidth = 2;
61
60
62
-
ctx.strokeText('flo-bit', 0, fontSize);
61
+
ctx.textBaseline = 'middle';
62
+
ctx.textAlign = 'center';
63
+
64
+
ctx.strokeText(overlayConfig.text, rect.width / 2, rect.height / 2);
63
65
64
66
ctx.globalCompositeOperation = 'destination-out';
65
-
66
-
ctx.font = '900 ' + fontSize + 'px Arial';
67
-
ctx.fillText('flo-bit', 0, fontSize);
67
+
ctx.fillText(overlayConfig.text, rect.width / 2, rect.height / 2);
68
68
}
69
+
70
+
// const input = document.getElementById('name');
71
+
72
+
// // on change
73
+
// input.addEventListener('change', function() {
74
+
// overlayConfig.text = input.value;
75
+
// resizeOverlayCanvas();
76
+
// });
77
+
69
78
70
79
// Initial resize
71
80
resizeOverlayCanvas();
···
1151
1160
1152
1161
updateKeywords();
1153
1162
initFramebuffers();
1154
-
multipleSplats(parseInt(Math.random() * 20) + 5);
1163
+
multipleSplats(25);
1155
1164
1156
1165
let lastUpdateTime = Date.now();
1157
1166
let colorUpdateTimer = 0.0;
···
1393
1402
}
1394
1403
1395
1404
function splatPointer(pointer) {
1396
-
let dx = pointer.deltaX * config.SPLAT_FORCE;
1397
-
let dy = pointer.deltaY * config.SPLAT_FORCE;
1405
+
let dx = pointer.deltaX * config.SPLAT_FORCE * 5;
1406
+
let dy = pointer.deltaY * config.SPLAT_FORCE * 5;
1398
1407
splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color);
1399
1408
}
1400
1409
···
1405
1414
color.g *= 10.0;
1406
1415
color.b *= 10.0;
1407
1416
const x = Math.random();
1408
-
const y = Math.random() < 0.5 ? 1 : 0.3;
1417
+
const y = Math.random() < 0.5 ? 0.8 : 0.2;
1409
1418
const dx = 100 * (Math.random() - 0.5);
1410
1419
const dy = 1000 * (Math.random() - 0.5);
1411
1420
splat(x, y, dx, dy, color);
···
1434
1443
return radius;
1435
1444
}
1436
1445
1437
-
canvas.addEventListener('pointerdown', (e) => {
1446
+
canvas.addEventListener('mousedown', (e) => {
1438
1447
let posX = scaleByPixelRatio(e.offsetX);
1439
1448
let posY = scaleByPixelRatio(e.offsetY);
1440
1449
let pointer = pointers.find((p) => p.id == -1);
···
1442
1451
updatePointerDownData(pointer, -1, posX, posY);
1443
1452
});
1444
1453
1445
-
document.body.addEventListener('pointermove', (e) => {
1454
+
document.body.addEventListener('mousemove', (e) => {
1446
1455
let pointer = pointers[0];
1447
1456
// if (!pointer.down) return;
1448
1457
let posX = scaleByPixelRatio(e.offsetX);
···
1450
1459
updatePointerMoveData(pointer, posX, posY);
1451
1460
});
1452
1461
1453
-
window.addEventListener('pointerup', () => {
1462
+
window.addEventListener('mouseup', () => {
1454
1463
updatePointerUpData(pointers[0]);
1455
1464
});
1456
1465
1457
-
// canvas.addEventListener('touchstart', (e) => {
1458
-
// e.preventDefault();
1459
-
// const touches = e.targetTouches;
1460
-
// while (touches.length >= pointers.length) pointers.push(new PointerPrototype());
1461
-
// for (let i = 0; i < touches.length; i++) {
1462
-
// let posX = scaleByPixelRatio(touches[i].pageX);
1463
-
// let posY = scaleByPixelRatio(touches[i].pageY);
1464
-
// updatePointerDownData(pointers[i + 1], touches[i].identifier, posX, posY);
1465
-
// }
1466
-
// });
1466
+
document.body.addEventListener('touchstart', (e) => {
1467
+
e.preventDefault();
1468
+
const touches = e.targetTouches;
1469
+
while (touches.length >= pointers.length) pointers.push(new PointerPrototype());
1470
+
for (let i = 0; i < touches.length; i++) {
1471
+
let posX = scaleByPixelRatio(touches[i].pageX);
1472
+
let posY = scaleByPixelRatio(touches[i].pageY);
1473
+
updatePointerDownData(pointers[i + 1], touches[i].identifier, posX, posY);
1474
+
}
1475
+
});
1467
1476
1468
-
// canvas.addEventListener(
1469
-
// 'touchmove',
1470
-
// (e) => {
1471
-
// e.preventDefault();
1472
-
// const touches = e.targetTouches;
1473
-
// for (let i = 0; i < touches.length; i++) {
1474
-
// let pointer = pointers[i + 1];
1475
-
// if (!pointer.down) continue;
1476
-
// let posX = scaleByPixelRatio(touches[i].pageX);
1477
-
// let posY = scaleByPixelRatio(touches[i].pageY);
1478
-
// updatePointerMoveData(pointer, posX, posY);
1479
-
// }
1480
-
// },
1481
-
// false
1482
-
// );
1477
+
document.body.addEventListener(
1478
+
'touchmove',
1479
+
(e) => {
1480
+
e.preventDefault();
1481
+
const touches = e.targetTouches;
1482
+
for (let i = 0; i < touches.length; i++) {
1483
+
let pointer = pointers[i + 1];
1484
+
if (!pointer.down) continue;
1485
+
let posX = scaleByPixelRatio(touches[i].pageX);
1486
+
let posY = scaleByPixelRatio(touches[i].pageY);
1487
+
updatePointerMoveData(pointer, posX, posY);
1488
+
}
1489
+
},
1490
+
false
1491
+
);
1483
1492
1484
-
// window.addEventListener('touchend', (e) => {
1485
-
// const touches = e.changedTouches;
1486
-
// for (let i = 0; i < touches.length; i++) {
1487
-
// let pointer = pointers.find((p) => p.id == touches[i].identifier);
1488
-
// if (pointer == null) continue;
1489
-
// updatePointerUpData(pointer);
1490
-
// }
1491
-
// });
1493
+
document.body.addEventListener('touchend', (e) => {
1494
+
const touches = e.changedTouches;
1495
+
for (const element of touches) {
1496
+
let pointer = pointers.find((p) => p.id == element.identifier);
1497
+
if (pointer == null) continue;
1498
+
updatePointerUpData(pointer);
1499
+
}
1500
+
});
1492
1501
1493
1502
// window.addEventListener('keydown', (e) => {
1494
1503
// if (e.code === 'KeyP') config.PAUSED = !config.PAUSED;