Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.01.2020, 23:20
Новичок на форуме
Отправить личное сообщение для xedus Посмотреть профиль Найти все сообщения от xedus
 
Регистрация: 21.01.2020
Сообщений: 1

Как изменить параметры 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)}
}
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2020, 00:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

Сообщение от xedus
Как можно через JS изменить параметр CSS - background-color, желательно с переходом,
https://javascript.ru/forum/misc/615...tml#post409242
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2020, 01:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

анимация 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как плавно открыть блок при при клике на видео-миниатюру ? Antonjrjr Events/DOM/Window 0 14.09.2017 18:41
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31
Подскажите как при помощи JS hta в трею свернуть kimboo Общие вопросы Javascript 4 11.07.2008 16:00
Как передавать переданные в js файлы параметры? Mattias Общие вопросы Javascript 4 26.06.2008 16:58