xedus,
<html>
<head>
<title>die...</title>
<meta charset="utf-8">
<style type="text/css">
*{
--back-color: #191919;
--white-color: white;
--theme-color: #3a3a3a;
}
@font-face {
font-family: hard;
src: url(../fonts/1.otf);
}
body {
background-image: url(../img/bg.png);
background-size: 20%;
font-family: "hard", serif;
}
.main-text {
display: flex;
flex-direction: row;
justify-content: center;
color: var(--white-color);
font-family: "hard", serif;
font-size: 64pt;
text-align: center;
animation: glow 1.5s infinite ease-in-out;
margin-bottom: 5%;
margin-top: 10%;
}
.theme {
display: flex;
flex-direction: row;
justify-content: center;
color: var(--theme-color);
font-family: "hard", serif;
font-size: 54pt;
text-align: center;
margin-bottom: 3%;
cursor: pointer;
}
</style>
</head>
<body id="bg2">
<div class="main-text">ВЫБЕРИ  СВОЮ  СТОРОНУ</div>
<audio src="audio/1.mp3" loop="" autoplay=""></audio>
<div class="theme light" id="light2">СВЕТЛАЯ  СТОРОНА</div>
<div class="theme dark">ТЕМНАЯ  СТОРОНА</div>
<script>
class bgHover {
constructor(el){
this.colorFrom = 50;
this.colorTo = 255;
this.elem = el;
this.elem.addEventListener("mouseenter", this.eventHandler.bind(this));
this.elem.addEventListener("mouseleave", this.eventHandler.bind(this));
this.start = null;
}
eventHandler({target, type}){
if(["mouseenter", "mouseleave"].includes(type)) {
cancelAnimationFrame(this.timer);
[this.colorFrom, this.colorTo] = [this.colorTo, this.colorFrom];
this.start = performance.now();
this.timer = requestAnimationFrame(this.loop.bind(this));
}
}
loop(timestamp){
var progress = (timestamp - this.start)/1000;
if (progress < 1) {
this.timer = requestAnimationFrame(this.loop.bind(this));
}
else progress = 1;
var r = this.colorFrom + (this.colorTo - this.colorFrom) * progress | 0;
this.elem.style.backgroundColor = `rgb(255,${r},255)`;
}
}
for(const div of document.querySelectorAll(".theme")) new bgHover(div);
</script>
</body>
</html>