Форум

xedus · #1 (**permalink**) 21.01.2020, 23:20

Такой вопрос. Как можно через JS изменить параметр CSS - background-color, желательно с переходом, не знаю как в JS делается переход, но для справки чтобы переход был как при использовании transition в css.
Код:
HTML:

<html>
    <head>
        <title>die...</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/1.js"></script>
    </head>
<body id="bg2">
	<div class="main-text">ВЫБЕРИ  &nbspСВОЮ &nbspСТОРОНУ</div>
    <audio src="audio/1.mp3" loop="" autoplay=""></audio>
    <div class="theme light" id="light2">СВЕТЛАЯ &nbspСТОРОНА</div>
    <div class="theme dark">ТЕМНАЯ &nbspСТОРОНА</div>
</body>
</html>

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;
}
.light:hover {
	color: var(--white-color);
	transition: 1s;
}
.light:not(:hover) {
	color: var(--theme-color);
	transition: 1s;
}
.dark:hover {
	color: black;
	transition: 1s;
	text-shadow: 0 0 4px white;
}
.dark:not(:hover) {
	color: var(--theme-color);
	transition: 1s;
}

@keyframes glow {
	from {text-shadow: 0 0 0px var(--white-color)}
	50% {text-shadow:  0 0 10px var(--white-color)}
	to {text-shadow: 0 0 0px var(--white-color)}
}

рони · #2 (**permalink**) 22.01.2020, 00:12

Сообщение от xedus

Как можно через JS изменить параметр CSS - background-color, желательно с переходом,

https://javascript.ru/forum/misc/615...tml#post409242

рони · #3 (**permalink**) 22.01.2020, 01:28

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">ВЫБЕРИ  &nbspСВОЮ &nbspСТОРОНУ</div>
    <audio src="audio/1.mp3" loop="" autoplay=""></audio>
    <div class="theme light" id="light2">СВЕТЛАЯ &nbspСТОРОНА</div>
    <div class="theme dark">ТЕМНАЯ &nbspСТОРОНА</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>

Форум

Справочник

Discord чат

Курсы javascript