-
Notifications
You must be signed in to change notification settings - Fork 0
/
03.letter_flow.html
105 lines (95 loc) · 3.53 KB
/
03.letter_flow.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Letter Flow</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
background-color: #000;
color: #00FF00; /* Set the color of the text */
font-family: "Roboto", sans-serif; /* Choose a sans-serif font */
}
.particle {
position: absolute;
font-size: 16px; /* Adjust font size */
line-height: 16px; /* Adjust line height */
color: rgba(0, 255, 0, 0.8); /* Semi-transparent green */
}
.menu {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="menu">
<!--
<span>Subject</span>
<span>Mathematics</span>
<span>Physics</span>
<span>Machine Learning</span>
-->
</div>
<script>
function createParticle(char, left, top) {
const particle = document.createElement('div');
particle.classList.add('particle');
particle.innerText = char; // Set the character
particle.style.left = left + 'px';
particle.style.top = top + 'px';
document.body.appendChild(particle);
return particle;
}
function animateParticles() {
const menuText = "Subject Mathematics Physics Machine Learning";
const particles = [];
let currentIndex = 0;
// Calculate left positions dynamically based on the number of characters
const charWidth = 20; // Adjust this according to your font size and spacing
const menuWidth = charWidth * menuText.length;
const startX = (window.innerWidth - menuWidth) / 2;
// Define the positions to stop the particles and form the menu text
const menuPositions = [];
for (let i = 0; i < menuText.length; i++) {
menuPositions.push({left: startX + i * charWidth, top: 50});
}
// Create particles moving upwards with random characters
for (let i = 0; i < menuText.length; i++) {
const char = menuText[i];
const particle = createParticle(char, Math.random() * window.innerWidth, window.innerHeight);
particles.push(particle);
}
// Stop particles and form menu text
const animationInterval = setInterval(() => {
if (currentIndex >= menuText.length) {
clearInterval(animationInterval);
return;
}
const position = menuPositions[currentIndex];
gsap.to(particles[currentIndex], {
duration: 0.9, // Fast animation
left: position.left,
top: position.top,
delay: currentIndex * 0.1 // Add delay between each character animation
});
currentIndex++;
}, 50); // Adjust the delay as needed
}
// Start the animation when the window loads
window.onload = function() {
animateParticles();
};
</script>
</body>
</html>