Динамическое изменение цвета фона

@ExXtaZzyUA · Регистрация: 30.11.2016

Студворк — интернет-сервис помощи студентам

Нужно релизовать блок (После ввода, фигура не важно), при вхождении курсора и дальнейшем движении по нему цвет фона этого блока должен плавно менятся (не важно какие цвета, скорость и повторения).
Если кому не трудно и кто знает как это решить прощу помочь.
Нужно завтра в обед.
Сейас буду пытаться сам найти решение, но пока что сомневаюсь что выйдет.
надеюсь кто то поможет.
Заранее спасибо.

Добавлено через 1 минуту
Использовать можно JS, CSS и HTML;

@Balanaar · 02.03.2017, 14:35

HTML5
1
<body></body>

JavaScript
1
2
3
4
5
6
7
8
9
function getRandomColor() {
  var color = [];
  while (color.length < 3) color.push(Math.floor(Math.random() * 255));
  return 'rgb('+color.join(', ')+')';
}
 
document.body.onmousemove = function() {
  document.body.style.backgroundColor = getRandomColor();
}

ПРЕДУПРЕЖДЕНИЕ! Людям, страдающим приступами эпилепсии - не запускать код!

@ExXtaZzyUA · 02.03.2017, 15:13 **[ТС]**

Balanaar, Спасибо. Будет с чего начать работу. Не знаете как сделать плавное изменение цвета?

Добавлено через 8 минут
Balanaar, Спасибо. Будет с чего начать работу. Не знаете как сделать плавное изменение цвета?

@Balanaar · 02.03.2017, 15:19

Что понимать под "плавным изменением цвета"? Не совсем понятно.

@ExXtaZzyUA · 02.03.2017, 15:20 **[ТС]**

Balanaar, что бы когда ведешь курсором не повялялся новый цывет а что бы старый перетекал в новый

@Balanaar · 02.03.2017, 15:32

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var currentColor = [255, 255, 255];
var nextColor = getRandomColor();
var currentStep = 0;
var steps = 100;
 
function getRandomColor() {
  var color = [];
  while (color.length < 3) color.push(Math.floor(Math.random() * 255));
  return color;
}
 
document.body.onmousemove = function() {
  currentStep++;
  document.body.style.backgroundColor = 'rgb( ' + currentColor.map(function(e,i){
    return Math.floor(e + (nextColor[i] - e) * currentStep / steps);
  }).join(', ') + ')';
  if (currentStep == 100) {
    currentStep = 0;
    currentColor = nextColor;
    nextColor = getRandomColor();
  }
}

Так?

@ExXtaZzyUA · 02.03.2017, 15:38 **[ТС]**

Balanaar, подксскажите как его привести в выполнение из html файла, он у меня в .js лежит.

@Balanaar · 02.03.2017, 15:42

Поместите код между тегами <script> после вашей разметки.

Добавлено через 25 секунд

PHP/HTML
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
<body></body>
<script>
var currentColor = [255, 255, 255];
var nextColor = getRandomColor();
var currentStep = 0;
var steps = 100;
 
function getRandomColor() {
  var color = [];
  while (color.length < 3) color.push(Math.floor(Math.random() * 255));
  return color;
}
 
document.body.onmousemove = function() {
  currentStep++;
  document.body.style.backgroundColor = 'rgb( ' + currentColor.map(function(e,i){
    return Math.floor(e + (nextColor[i] - e) * currentStep / steps);
  }).join(', ') + ')';
  if (currentStep == steps) {
    currentStep = 0;
    currentColor = nextColor;
    nextColor = getRandomColor();
  }
}
</script>

Добавлено через 1 минуту
Или вам надо файл подключить?

@ExXtaZzyUA · 02.03.2017, 15:43 **[ТС]**

Balanaar,

PHP/HTML
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
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
    var currentColor = [255, 255, 255];
    var nextColor = getRandomColor();
    var currentStep = 0;
    var steps = 100;
 
    function getRandomColor() {
        var color = [];
        while (color.length < 3) color.push(Math.floor(Math.random() * 255));
        return color;
    }
 
    document.body.onmousemove = function() {
        currentStep++;
        document.body.style.backgroundColor = 'rgb( ' + currentColor.map(function(e,i){
                return Math.floor(e + (nextColor[i] - e) * currentStep / steps);
            }).join(', ') + ')';
        if (currentStep == 100) {
            currentStep = 0;
            currentColor = nextColor;
            nextColor = getRandomColor();
        }
    }
</script>
</body>
</html>

так?

@Balanaar · 02.03.2017, 15:48

PHP/HTML
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
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
<script>
    var currentColor = [255, 255, 255];
    var nextColor = getRandomColor();
    var currentStep = 0;
    var steps = 100;
 
    function getRandomColor() {
        var color = [];
        while (color.length < 3) color.push(Math.floor(Math.random() * 255));
        return color;
    }
 
    document.body.onmousemove = function() {
        currentStep++;
        document.body.style.backgroundColor = 'rgb( ' + currentColor.map(function(e,i){
                return Math.floor(e + (nextColor[i] - e) * currentStep / steps);
            }).join(', ') + ')';
        if (currentStep == 100) {
            currentStep = 0;
            currentColor = nextColor;
            nextColor = getRandomColor();
        }
    }
</script>
</html>

Так

Добавлено через 3 минуты
Только в 25й строке замените 100 на steps.
Так грамотнее будет.

@ExXtaZzyUA · 02.03.2017, 15:56 **[ТС]**

Balanaar, Все шикарно. Последнее, что нужно поменять что бы менялся bg не у body, а у блока div который у меня написан?

@Balanaar · 02.03.2017, 15:59

А какой div у вас написан?

@ExXtaZzyUA · 02.03.2017, 16:24 **[ТС]**

Balanaar,

HTML5
1
2
3
<div class="block1">Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
    dolore magna aliguam erat volutpat.</div>

Класс из css

CSS
1
2
3
4
5
6
.block1 {
    margin-left: 30%; /* Отступ слева */
    width: 40%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
}

Добавлено через 22 минуты
Balanaar, ладно, я ращберусь. Спасибо ща помощь. Сейсас буду в вашем коде копаться)

@Balanaar · 02.03.2017, 16:26

Окончательно: http://codepen.io/anon/pen/pegMWg

HTML5
1
2
3
<div class="block1">Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
    dolore magna aliguam erat volutpat.</div>

CSS
1
2
3
4
5
6
.block1 {
    margin-left: 30%; /* Отступ слева */
    width: 40%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var block = document.getElementsByClassName('block1')[0];
var currentColor = window.getComputedStyle(block).getPropertyValue('background-color').replace(/rgb\((.+)\)/g, '$1').split(', ').map(function(e){return parseInt(e);});
var nextColor = getRandomColor();
var currentStep = 0;
var steps = 100;
 
function getRandomColor() {
  var color = [];
  while (color.length < 3) color.push(Math.floor(Math.random() * 255));
  return color;
}
 
block.onmousemove = function() {
  currentStep++;
  block.style.backgroundColor = 'rgb( ' + currentColor.map(function(e,i){
    return Math.floor(e + (nextColor[i] - e) * currentStep / steps);
  }).join(', ') + ')';
  if (currentStep == steps) {
    currentStep = 0;
    currentColor = nextColor;
    nextColor = getRandomColor();
  }
}

UPD: Внёс поправку.

@ExXtaZzyUA · 02.03.2017, 16:46 **[ТС]**

Balanaar, Хочу от вас детей)
спасибо

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

@ExXtaZzyUA 15 / 15 / 6 Регистрация: 30.11.2016 Сообщений: 101

	Динамическое изменение цвета фона 02.03.2017, 14:21. Показов 11423. Ответов 14 Метки нет (Все метки) Нужно релизовать блок (После ввода, фигура не важно), при вхождении курсора и дальнейшем движении по нему цвет фона этого блока должен плавно менятся (не важно какие цвета, скорость и повторения). Если кому не трудно и кто знает как это решить прощу помочь. Нужно завтра в обед. Сейас буду пытаться сам найти решение, но пока что сомневаюсь что выйдет. надеюсь кто то поможет. Заранее спасибо. Добавлено через 1 минуту Использовать можно JS, CSS и HTML; 0

@ExXtaZzyUA 15 / 15 / 6 Регистрация: 30.11.2016 Сообщений: 101
	02.03.2017, 15:13 [ТС]
	Balanaar, Спасибо. Будет с чего начать работу. Не знаете как сделать плавное изменение цвета? Добавлено через 8 минут Balanaar, Спасибо. Будет с чего начать работу. Не знаете как сделать плавное изменение цвета? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	02.03.2017, 15:19
	Что понимать под "плавным изменением цвета"? Не совсем понятно. 0

@ExXtaZzyUA 15 / 15 / 6 Регистрация: 30.11.2016 Сообщений: 101
	02.03.2017, 15:20 [ТС]
	Balanaar, что бы когда ведешь курсором не повялялся новый цывет а что бы старый перетекал в новый 0

@ExXtaZzyUA 15 / 15 / 6 Регистрация: 30.11.2016 Сообщений: 101
	02.03.2017, 15:38 [ТС]
	Balanaar, подксскажите как его привести в выполнение из html файла, он у меня в .js лежит. 0

@ExXtaZzyUA 15 / 15 / 6 Регистрация: 30.11.2016 Сообщений: 101
	02.03.2017, 15:56 [ТС]
	Balanaar, Все шикарно. Последнее, что нужно поменять что бы менялся bg не у body, а у блока div который у меня написан? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	02.03.2017, 15:59
	А какой div у вас написан? 1

@ExXtaZzyUA 15 / 15 / 6 Регистрация: 30.11.2016 Сообщений: 101
	02.03.2017, 16:46 [ТС]
	Balanaar, Хочу от вас детей) спасибо 0

Динамическое изменение цвета фона

Решение