-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanimated-heading-random.html
133 lines (113 loc) · 3.44 KB
/
animated-heading-random.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Randomized Animated Heading</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f9f9f9;
}
.heading-container {
overflow: hidden;
text-align: center;
}
.heading {
font-size: 3rem;
color: #333;
margin: 0;
}
.word {
display: inline-block;
opacity: 0;
transform: translateY(20px);
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
button {
margin-top: 40px;
padding: 10px 20px;
font-size: 16px;
background-color: #4285f4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3367d6;
}
</style>
</head>
<body>
<div class="heading-container">
<h1 class="heading">
<span class="word">Words</span>
<span class="word">Will</span>
<span class="word">Animate</span>
<span class="word">At</span>
<span class="word">Random</span>
<span class="word">Speeds</span>
</h1>
<button id="animate-btn">Animate Again</button>
</div>
<script>
// Function to get a random number between min and max
function getRandomValue(min, max) {
return Math.random() * (max - min) + min;
}
// Function to animate heading with random intervals
function animateHeadingRandom(selector, customText = null) {
const heading = document.querySelector(selector);
// If custom text is provided, replace the heading content
if (customText) {
heading.innerHTML = '';
const words = customText.split(' ');
words.forEach(word => {
const span = document.createElement('span');
span.textContent = word + ' ';
span.className = 'word';
heading.appendChild(span);
});
}
// Get all word spans
const wordSpans = heading.querySelectorAll('.word');
// Reset any existing animations
wordSpans.forEach(span => {
span.style.opacity = '0';
span.style.transform = 'translateY(20px)';
span.style.animation = 'none';
});
// Force reflow to ensure animation reset
void heading.offsetWidth;
// Apply random animations to each word
wordSpans.forEach(span => {
const speed = getRandomValue(0.5, 1.0);
const delay = getRandomValue(0.0, 0.75);
// Apply the animation
span.style.animation = `fadeIn ${speed.toFixed(2)}s ease-out ${delay.toFixed(2)}s forwards`;
});
}
// Run the animation when the page loads
document.addEventListener('DOMContentLoaded', function() {
animateHeadingRandom('.heading');
// Add button click handler to re-animate
document.getElementById('animate-btn').addEventListener('click', function() {
animateHeadingRandom('.heading');
});
});
// Example of how to use with custom text:
// animateHeadingRandom('.heading', 'This is a custom animated heading');
</script>
</body>
</html>