Здравствуйте!
Задача состоит в том, что бы при прокрутке страницы плавно менялся цвет фона.
Пояснение:
Есть два цвета ( к примеру rgb(0, 0, 0) и rgb(255, 255, 255) ). Я в коде указываю позиции scroll'а 0px и 100px. И теперь, нужно, что бы скрипт, по мере прокрутки, плавно превращал rgb(0, 0, 0) в rgb(255, 255, 255), т.е. если я прокрутил scroll на позицию 50px цвет у фона был rgb(122, 122, 122)
Я попытался это решить способом процентов, но это же будет работать только с цветами rgb, а как же hex и другие? И вообще оно странно меняет цвета, если там указаны цветные варианты (красный, жёлтый, синий...)
Код:
var scroll = function(element, style, positions, value) {
window.onscroll = function() {
var scrollTop = window.pageYOffset,
// Высчитываю процент того, на сколько нужно изменить цвет
pct = (window.pageYOffset - positions[0]) / positions[1],
colorsVal = [],
currentColor = [];
// Проверяю, не выходит ли scroll за рамки
if(window.pageYOffset <= positions[1] && window.pageYOffset >= positions[0]){
// Превращаю значение цветов в массив
colorsVal[0] = value[0].split(',');
colorsVal[1] = value[1].split(',');
for(var i = 0; i < colorsVal[0].length; i++){
// Проверяю, какое значение цвета больше
if(colorsVal[0][i] < colorsVal[1][i]){
// Высчитываю текущее значение цвета
var val = ((colorsVal[1][i] - colorsVal[0][i]) * pct) + colorsVal[0][i];
// Устанавливаю текущее значение цвета
currentColor[i] = Math.round(val);
}else{
// Высчитываю текущее значение цвета
var val = ((colorsVal[0][i] - colorsVal[1][i]) * pct) + colorsVal[1][i];
// Устанавливаю текущее значение цвета
currentColor[i] = Math.round(val);
};
};
// Применяю цвет фона к элементу
element.style[style] = 'rgb(' + currentColor.join(',') + ')';
};
};
};
(function() {
var obj = document.querySelector('.obj');
scroll(obj, 'background-color', [0, 100], ['0,0,0', '255,255,255']);
})();
body {height: 2000px; background-color: #eee}
div {
position: fixed;
width: 100px;
height: 100px;
background-color: black;
}
Как можно улучшить эту функцию и сделать более универсальной, что бы можно было указывать значение цвета 'black' и hex цвета? Или у кого есть вариант получше моего?
Заранее спасибо.
Ответ
Первое, что необходимо сделать — это убрать для удобства цвет из CSS и задавать его уже непосредственно в функции scroll при её инициализации.
Далее я вызвал функцию scroll с параметром positions [0, 1000], чтобы можно было нормально рассмотреть переход и у меня возникала проблема при каждом втором скролле. Проблема была в том, что массив colorsVal заполнялся не числами, а строками, и там, где происходит вычисление val = ((colorsVal[1][i] - colorsVal[0][i]) * pct) +colorsVal[0][i] (проблемное место выделено жирным) ноль прибавляется как строка и получается зашкаливающее значение в rgb. Решением является приведение к типу Number во время формирования массива:
colorsVal[0] = value[0].split(',').map(Number),
colorsVal[1] = value[1].split(',').map(Number);
После этого пример от меньших значений rgb к большим работает. Дальше возникли проблемы с переходом от больших значений к меньшим. Для решения этой проблемы пришлось немного изменить формулу расчета с
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;
}
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; }
Комментариев нет:
Отправить комментарий