Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как изменить параметры backgorund-color через js при наведении на определнный блок (https://javascript.ru/forum/dom-window/79304-kak-izmenit-parametry-backgorund-color-cherez-js-pri-navedenii-na-opredelnnyjj-blok.html)

xedus 21.01.2020 23:20
Как изменить параметры backgorund-color через js при наведении на определнный блок
 
Такой вопрос. Как можно через 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)}
}

рони 22.01.2020 00:12
Цитата:
Сообщение от xedus
Как можно через JS изменить параметр CSS - background-color, желательно с переходом,
https://javascript.ru/forum/misc/615...tml#post409242

рони 22.01.2020 01:28
анимация backgroundColor на js
 
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>


Часовой пояс GMT +3, время: 08:47.