-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnametag.html
91 lines (87 loc) · 2.76 KB
/
nametag.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
@font-face {
font-family: Caviar Dreams;
src: url("CaviarDreams_Bold.ttf");
}
@keyframes masked-animation {
0% {background-position: -1000px 0}
50% {background-position: 1000px 0}
100% {background-position: 1000px 0}
}
body{
margin: 0;
padding: 0;
background-color: transparent;
font-size: 35px;
}
.container{
background: linear-gradient(170deg, #272727 1%,#3A3A3A 51%,#272727 51%,#1B1B1B 100%);
border-width: 2px;
border-style: solid;
border-image: linear-gradient(170deg, #ffb019 0%, #A77216 100%);
border-image-slice: 1;
margin: 20px 0 0 40px;
padding: 0 20px 0 20px;
display: inline-block;
transform: skew(-30deg);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.nameTag{
display: inline-block;
transform: skew(30deg);
}
.nameTag::before{
animation-delay: 2.6s;
animation: masked-animation 10s ease-in-out infinite;
background-size: 400% 100%;
}
.titleFormat{
float: right;
overflow: visible;
position: relative;
z-index: 1000;
width: 100%;
font-weight: bold;
color: #A7A7A7;
text-shadow: 1px 1px rgba(0,0,0,0.4);
font-family: Caviar Dreams;
transition: all 1s;
}
.scroll::before{
position: absolute;
display: block;
content: attr(data-content);
width: 100%;
height: 100%;
color: rgba(0,0,0,0);
text-shadow: 1px 1px rgba(0,0,0,0);
background-image: linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.67) 48%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.67) 52%, rgba(255,255,255,0) 100%);
background-repeat: no-repeat;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<div class="container clear-fix">
<div class="nameTag titleFormat scroll" data-content="Monskiller">Monskiller</div>
</div>
</body>
<script>
function onDocumentReady() {
const params = new URLSearchParams(document.location.search.substring(1));
const username = params.get('user');
const size = params.get('size');
if (size) {
$('body').css('font-size', `${size}px`)
}
$('.nameTag').text(username).attr('data-content', username);
}
$(document).ready(function () { onDocumentReady(); });
</script>
</html>