主页 / 问题 / 623601
Accepted
Yuri
Asked:2020-02-05 18:07:37 +0000 UTC2020-02-05 18:07:37 +0000 UTC

滚动上的平滑彩色动画

  • 772

你好！

任务是在滚动页面时平滑地改变背景颜色。
解释：有两种颜色（例如rgb(0, 0, 0)和rgb(255, 255, 255)）。我在代码中指定了滚动条0px和的位置100px。现在，脚本在滚动时必须平滑地变成rgb(0, 0, 0)，rgb(255, 255, 255)即 如果我滚动定位50px背景颜色是rgb(122, 122, 122).

我试图用百分比法解决它，但这只适用于 rgb 颜色，但是十六进制和其他颜色呢？通常，如果在那里指示颜色选项（红色，黄色，蓝色......），它会奇怪地改变颜色

编码：

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;
}
<div class="obj"></div>

如何改进此功能并使其更加通用，以便可以指定“黑色”颜色值和十六进制颜色？或者谁有比我更好的版本？

提前致谢。

javascript

2 个回答

  1. Best Answer

    首先要做的是为了方便从 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;
}
    <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>

    • 7

  2. 您可以将相同的十六进制转换为 rgb。

    var hex = document.querySelector('input'),
    btn = document.querySelector('button'),
    rgbBlock = document.querySelector('.rgb'),
    hexval;

btn.addEventListener('click', function() {
  hexval = hex.value;
  rgbBlock.innerHTML = hexToRgbA(hexval);
});

function hexToRgbA(hex) {
  var c;
  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
    c = hex.substring(1).split('');
    if (c.length == 3) {
      c = [c[0], c[0], c[1], c[1], c[2], c[2]];
    }
    c = '0x' + c.join('');
    return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255] + ')';
  }
  
  throw new Error('не Hex');
}
    <input type="text" />
<button>convert</button>

<div class="rgb"></div>

    • 3

相关问题