Repository navigation
Expand file tree
/
Copy pathnhan-dev.astro
More file actions
93 lines (79 loc) · 5.7 KB
/
Copy pathnhan-dev.astro
File metadata and controls
93 lines (79 loc) · 5.7 KB
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
---
import { Image } from 'astro:assets'
import FileName from '@/components/file-name.astro'
---
<button type="button" aria-label="The drawing" class="nhan-dev relative cursor-none">
<FileName path="src/components/nhan-dev.astro" label="nhan-dev.astro" class="top-4 left-1/2 -translate-x-1/2" />
<svg width="1440" height="384" viewBox="0 0 1440 384" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto aspect-[3.75]">
<path stroke="currentColor" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" d="M10.0026 220.654C16.5026 199.154 29.5026 187.897 44.0026 186.654C86.8571 182.981 82.0026 271.049 80.0026 298.049C78.4026 319.649 71.336 355.049 68.0026 370.049C77.0026 312.382 107.003 196.849 155.003 196.049C203.003 195.249 210.669 305.321 208.003 363.655C221.003 344.655 266.203 254.049 275.003 234.049C286.003 209.049 305.003 173.154 315.003 129.154C325.003 85.1544 322.003 35.65 300.003 18.0444C282.198 3.79646 256.381 8.85118 240.003 31.0489C220.003 58.1544 225.366 93.2522 238.503 197.154C249.503 284.154 241.669 355.821 241.003 373.155C239.669 347.155 248.803 280.449 280.003 234.049C311.203 187.649 342.503 216.76 344.003 242.654C345.856 267.653 339.503 325.655 353.503 350.155C369.728 378.549 427.946 365.909 456.503 355.655C475.781 348.732 506.003 339.049 509.503 301.049C513.003 263.049 499.003 245.26 491.503 237.654C484.003 230.049 462.803 209.249 426.003 230.049C380.003 256.049 395.503 329.155 428.503 347.155C454.903 361.554 482.859 347.174 493.526 339.841C503.255 332.715 514.603 313.049 513.003 285.049C511.403 257.049 511.003 226.654 508.003 215.654C513.003 244.654 509.503 356.655 551.503 341.655C585.445 329.532 553.503 248.654 584.003 226.154C595.051 218.004 614.838 217.479 620.503 242.654C625.003 262.654 630.003 309.155 622.003 360.655C625.003 314.655 625.503 212.654 689.503 212.654C746.003 212.654 721.503 282.784 721.503 321.155C721.503 351.549 740.003 387.655 796.503 328.155"/>
<path stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M856.433 340.056C857.599 337.722 862.011 335.917 866.411 338.717C870.811 341.517 870.099 347.384 868.933 349.717C867.433 351.717 860.033 355.717 856.433 353.717C853.933 352.717 850.611 348.056 849.411 340.056C847.911 330.056 857.411 330.556 861.411 330.556C865.411 330.556 876.911 334.056 877.911 343.556C878.911 353.056 871.411 359.556 866.411 361.556C861.411 363.556 849.411 361.556 845.411 351.556C841.411 341.556 841.433 336.217 842.933 332.717C844.433 329.217 849.411 320.717 864.911 323.056C879.452 325.25 886.433 338.217 885.933 345.217C885.433 352.217 878.433 363.217 873.433 366.717C868.433 370.217 847.433 362.717 844.433 354.717"/>
<path stroke="currentColor" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" d="M1082.5 257.654C1074.34 242.488 1048.7 212.554 1011.5 214.154C965.003 216.154 946.503 256.154 941.503 278.654C936.503 301.154 947.503 333.654 983.003 349.654C1018.5 365.654 1054.5 370.654 1077.5 314.154C1095.9 268.954 1092.84 103.988 1089 27.1544C1090.34 134.154 1093 333.654 1127.5 353.154C1153.94 368.095 1193.93 337.594 1214 323.654C1232 311.154 1243.5 293.654 1243.5 278.654C1243.5 248.154 1214.5 240.654 1193.5 244.154C1177.5 246.821 1158.53 259.435 1156.5 295.154C1154 339.154 1190.61 357.368 1215.5 362.154C1241.5 367.154 1283.5 349.654 1291.5 314.154C1297.9 285.754 1290.17 264.654 1285.5 257.654C1302.84 284.988 1354.1 356.454 1364.5 369.654C1374.9 382.854 1407 293.654 1429.5 252.154"/>
</svg>
<span aria-hidden="true" class="indicator absolute top-0 left-0 size-[8vw] pointer-events-none transition-opacity md:size-16">
<Image src="/sparkles.svg" width={79} height={76} alt="" class="size-full" />
</span>
</button>
<script>
import { gsap } from 'gsap'
import '@/scripts/gsap'
const nd = document.querySelector('.nhan-dev') as HTMLElement
const indicator = nd.querySelector('.indicator') as HTMLElement
const paths = nd.querySelectorAll('path')
const draw = gsap.timeline({
defaults: { drawSVG: 0, ease: 'none' },
scrollTrigger: {
trigger: 'footer',
start: 'top center',
},
onComplete: function () { playDrawSound() },
})
.from(paths[0], { duration: 3 })
.from(paths[1], { duration: .75 })
.from(paths[2], { duration: 1.25 })
const drawBlank = gsap.timeline({
defaults: {
drawSVG: '100% 100%',
ease: 'none',
},
paused: true,
})
.to(paths[0], { duration: 1.5 })
.to(paths[1], { duration: .375 })
.to(paths[2], { duration: .625 })
gsap.set(indicator, {
xPercent: -50,
yPercent: -50,
x: nd.getBoundingClientRect().width * .55,
y: nd.getBoundingClientRect().height / 2,
})
nd.addEventListener('click', function () {
if (draw.isActive() || drawBlank.isActive()) return
if (draw.progress() === 1) {
drawBlank.play(0).eventCallback('onComplete', function () {
draw.restart()
})
}
})
function onMove(e: MouseEvent) {
const { left, top } = nd.getBoundingClientRect()
gsap.quickTo(indicator, 'x', { duration: .5, ease: 'circ' })(e.clientX - left)
gsap.quickTo(indicator, 'y', { duration: .5, ease: 'circ' })(e.clientY - top)
}
nd.addEventListener('mouseenter', () => window.addEventListener('mousemove', onMove))
nd.addEventListener('mouseleave', function () {
window.removeEventListener('mousemove', onMove)
const { width, height } = nd.getBoundingClientRect()
gsap.quickTo(indicator, 'x', { duration: 1, ease: 'elastic' })( width * .55)
gsap.quickTo(indicator, 'y', { duration: 1, ease: 'elastic' })( height / 2)
})
window.addEventListener('resize', function () {
const { width, height } = nd.getBoundingClientRect()
gsap.set(indicator, { x: width * .55, y: height / 2 })
})
let audio: HTMLAudioElement
function playDrawSound() {
if (!audio) audio = new Audio('/sounds/241809_4404552-lq.mp3')
audio.currentTime = 0
audio.play()
}
</script>