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

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

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

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

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

@Balanaar · 02.03.2017, 14:35

HTML5

1	<body></body>

Javascript

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

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

<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

<!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

<!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

.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

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

Javascript

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, Хочу от вас детей)
спасибо

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

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

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

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

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

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

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

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

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

Решение