html
html
1
2
3
<div id='color-overlay'>
<h1 id='text-bg'>SOLO</h1>
</div>
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
body{
margin:0 ;
padding:0;
background-image:url('https://media1.tenor.com/images/b1b118ed130d9ab085e475ab0ecadcb6/tenor.gif?itemid=15826314');
height: 100vh;
width:100%;
background-size:cover;
}
#color-overlay{
margin:0 ;
padding:0;
opacity: 0.8;
text-align: center;
color:white;
}
#text-bg{
line-height:100vh;
font-size:80px;
margin:0 ;
font-family:Verdana;
}
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 generateRandomColor() {
return '#' + Math.floor(Math.random() * 163427).toString(16);
}
function changeBackgroundColor() {
let colorBg = document.getElementById('color-overlay');
colorBg.style.backgroundColor = generateRandomColor();
}
function changeBackgroundText() {
let textBg = document.getElementById('text-bg');
if (textBg.innerHTML == 'SOLO')
textBg.innerHTML = 'LEARN';
else if (textBg.innerHTML == 'LEARN')
textBg.innerHTML = 'IS';
else if (textBg.innerHTML == 'IS')
textBg.innerHTML = 'THE';
else if (textBg.innerHTML == 'THE')
textBg.innerHTML = 'BEST';
else if (textBg.innerHTML == 'BEST')
textBg.innerHTML = 'SOLO';
}
function checkBackground() {
generateRandomColor();
changeBackgroundColor();
changeBackgroundText();
}
setInterval(checkBackground, 600);
BROWSER
Console
Run