-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (92 loc) · 3.36 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Awesome Text Effect</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:700');
* {
margin: 0;
padding: 0;
}
body {
background: url(https://images.weserv.nl/?url=i.imgur.com/6QJjYMe.jpg) no-repeat, #000;
background-size:cover;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: "Amatic SC";
overflow-x: hidden;
flex-direction: column;
line-height: 1.2;
}
div {
text-align: center;
font-size: 7.4rem;
color: #fee;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
}
#message {
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #13d30c, 0 0 0.5em #13d30c, 0 0 0.1em #13d30c, 0 10px 3px #000;
}
#tagline {
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #6327ee, 0 0 0.5em #6327ee, 0 0 0.1em #6327ee, 0 10px 3px #000;
}
@media (max-width: 800px) {
div {
font-size: 10vw
}
}
</style>
</head>
<body>
<a href="https://github.com/gayatri-p/awesome-text-effect" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
<div id="main" title=" possible: '$$$$$$'"></div>
<div id="message" title="delay: 200, possible: '123456789'"></div>
<div id="tagline" ></div>
<script>
const awesomeEffect = (dict) => {
let container = document.getElementById(dict.id)
let randomChars = ''
let text = dict.text
let possible = (dict.possible) ? dict.possible : 'ABCDEFASIRUWJFCKSJHYWRKJEsdfskdjfk-+*/|}{[]~\\":;?/.><=+-_)(*&^%$#@!)}'
let delay = dict.delay ? dict.delay : 70
const generateRandomTitle = (i, randomChars) => {
setTimeout(_ => {
container.innerText = randomChars
}, i * delay)
}
for (let i = 0; i < text.length + 1; i++) {
randomChars = text.substr(0, i);
for (let j = i; j < text.length; j++) {
randomChars += possible.charAt(
Math.floor(Math.random() * possible.length)
)
}
generateRandomTitle(i, randomChars);
randomChars = ''
}
}
setTimeout(_ => {
awesomeEffect({
id: 'main',
text: 'I have possible as $ sign',
possible: '$$$$$$'
})
awesomeEffect({
id: 'message',
text: 'I have delay & possible on me',
possible: '123456789',
delay: 200
})
awesomeEffect({
id: 'tagline',
text: 'I\'m default'
})
}, 50)
</script>
</body>
</html>