html
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
<!DOCTYPE html>
<!--
Made a simple animation as I don't want to sound
super cheesy like in my other codes, and I do not
have much time.
So yeah, this code is for both me reaching level
19 and #1 all time rank. Don't know why the
initial delay, but enjoy!
Btw Date of both these achievements: 11/02/2020
-->
<html>
<head>
<title>Level 19 Celebration Code</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
</head>
<body>
<div class="box" id="box1">
<div class="prof"></div>
<div class="name"></div>
</div>
<div class="box" id="box2">
<div class="prof"></div>
<div class="name"></div>
</div>
<div class="box" id="box3">
Enter to Rename, Shift+Enter to Preview
css
css
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
body {
background-color:#272822;
}
.box {
left:calc(50vw - 30vmin);
position:relative;
height:15vmin;
width:60vmin;
background-color:#d4d3d2;
margin-top:3vmin;
margin-bottom:3vmin;
border-radius:1vmin;
}
.prof {
position:relative;
top:1.5vmin;
left:2vmin;
height:12vmin;
width:12vmin;
border-radius:50%;
background-color:#bababa;
}
.name {
position:relative;
top:-7.5vmin;
left:17vmin;
height:6vmin;
width:40vmin;
Enter to Rename, Shift+Enter to Preview
js
js
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
$(function() {
setInterval(()=>{
swap(4,5,0);
swap(3,5,1000);
swap(2,5,2000);
swap(1,5,3000);
color("#FFD700",4000);
color("#D4D3D2",4800);
revert();
},5800);
});
function swap(num1,num2,time){
setTimeout(()=>{
$("#box"+num1).animate({
top:"+=18vmin"
},800);
$("#box"+num2).animate({
top:"-=18vmin"
},800);
},time);
}
function color(col,time){
setTimeout(()=>{
$("#box5").animate({
backgroundColor:col
},500);
},time);
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run