N
The first thing to do is remove the colour from the CSS for convenience and put it directly into the function. scroll Her initialization.Then I called for a function. scroll with parameter positions [0, 1000]so that you can take a good look at the transition and I have a problem with every second scrub. The problem was that the mass colorsVal It's not the numbers, it's the linesrows, and where the counting takes place. val = ((colorsVal[1][i] - colorsVal[0][i]) * pct) +colorsVal[0][i] (difficult point in bold) zero is added as a row and a flashing point is produced rgb♪ The solution is to attach to the type Number During the formation of the mass:colorsVal[0] = value[0].split(',').map(Number),
colorsVal[1] = value[1].split(',').map(Number);
After this, the lesser example rgb It works hard. There were more problems moving from larger to lower values. To address this problem, the calculation formula had to change slightly from val = ((colorsVal[0][i] - colorsVal[1][i]) * pct) + colorsVal[1][i];
♪ val = colorsVal[0][i] - ((colorsVal[0][i] - colorsVal[1][i]) * pct);
var scroll = function(element, style, positions, value) {
// Превращаю значение цветов в массив
var colorsVal = [], val;
colorsVal[0] = value[0].split(',').map(Number),
colorsVal[1] = value[1].split(',').map(Number);
element.style[style] = 'rgb(' + colorsVal[0].join(',') + ')';
window.onscroll = function() {
var scrollTop = window.pageYOffset,
// Высчитываю процент того, на сколько нужно изменить цвет
pct = (window.pageYOffset - positions[0]) / positions[1],
currentColor = [];
// Проверяю, не выходит ли scroll за рамки
if(window.pageYOffset <= positions[1] && window.pageYOffset >= positions[0]){
for(var i = 0; i < colorsVal[0].length; i++) {
// Проверяю, какое значение цвета больше
if(colorsVal[0][i] < colorsVal[1][i]){
// Высчитываю текущее значение цвета
val = ((colorsVal[1][i] - colorsVal[0][i]) * pct) + colorsVal[0][i];
// Устанавливаю текущее значение цвета
currentColor[i] = Math.round(val);
}else{
// Высчитываю текущее значение цвета
val = colorsVal[0][i] - ((colorsVal[0][i] - colorsVal[1][i]) * pct);
// Устанавливаю текущее значение цвета
currentColor[i] = Math.round(val);
};
};
// Применяю цвет фона к элементу
element.style[style] = 'rgb(' + currentColor.join(',') + ')';
};
};
};
(function() {
var obj = document.querySelector('.obj');
scroll(obj, 'background-color', [0, 1000], ['0,0,0', '255,255,255']);
})();body {height: 2000px; background-color: #eee}
div {
position: fixed;
width: 100px;
height: 100px;
}<div class="obj"></div>console.clear();
var scroll = function(element, style, positions, value) {
// Превращаю значение цветов в массив
var colorsVal = [], val;
colorsVal[0] = value[0].split(',').map(Number),
colorsVal[1] = value[1].split(',').map(Number);
element.style[style] = 'rgb(' + colorsVal[0].join(',') + ')';
window.onscroll = function() {
var scrollTop = window.pageYOffset,
// Высчитываю процент того, на сколько нужно изменить цвет
pct = (window.pageYOffset - positions[0]) / positions[1],
currentColor = [];
// Проверяю, не выходит ли scroll за рамки
if(window.pageYOffset <= positions[1] && window.pageYOffset >= positions[0]){
for(var i = 0; i < colorsVal[0].length; i++) {
// Проверяю, какое значение цвета больше
if(colorsVal[0][i] < colorsVal[1][i]){
// Высчитываю текущее значение цвета
val = ((colorsVal[1][i] - colorsVal[0][i]) * pct) + colorsVal[0][i];
// Устанавливаю текущее значение цвета
currentColor[i] = Math.round(val);
}else{
// Высчитываю текущее значение цвета
val = colorsVal[0][i] - ((colorsVal[0][i] - colorsVal[1][i]) * pct);
// Устанавливаю текущее значение цвета
currentColor[i] = Math.round(val);
};
};
// Применяю цвет фона к элементу
element.style[style] = 'rgb(' + currentColor.join(',') + ')';
};
};
};
(function() {
var obj = document.querySelector('.obj');
scroll(obj, 'background-color', [0, 1000], ['0,245,0', '255,0,0']);
})();body {height: 2000px; background-color: #eee}
div {
position: fixed;
width: 100px;
height: 100px;
}<div class="obj"></div>
