渐进背景变化 - JavaScript

Question

我想逐步改变背景颜色3次。

例如，我希望它逐渐从蓝色变成灰色变成紫色。目前，背景从蓝色转变为灰色。

试图说明吧：

= Blue 
== 
=== 
==== 
===== Grey 
==== 
=== 
== 
= Purple 

可能有人请帮助我让它从灰色到紫色去第一个转换后吗？

$(document).ready(function(){ 
    var scroll_pos = 0; 
    var animation_begin_pos = 0; 
    var animation_mid_pos = 500; 
    var animation_end_pos = 1000; 
    var beginning_color = new $.Color('rgb(0,156,243)'); 
    var middle_color = new $.Color('rgb(36,40,47)'); 
    var ending_color = new $.Color('rgb(97,20,204)'); 

    $(document).scroll(function() { 
     scroll_pos = $(this).scrollTop(); 
     if(scroll_pos >= animation_begin_pos && scroll_pos < animation_mid_pos) { 
      var percentScrolled = scroll_pos/(animation_mid_pos - animation_begin_pos); 
      var newRed = beginning_color.red() + ((middle_color.red() - beginning_color.red()) * percentScrolled); 
      var newGreen = beginning_color.green() + ((middle_color.green() - beginning_color.green()) * percentScrolled); 
      var newBlue = beginning_color.blue() + ((middle_color.blue() - beginning_color.blue()) * percentScrolled); 
      var newColor = new $.Color(newRed, newGreen, newBlue); 
      $('body').animate({ backgroundColor: newColor }, 0); 
      // messes up starting here 
     } else if (scroll_pos >= animation_mid_pos && scroll_pos <= animation_end_pos) { 
      scroll_ps = $(document).height() - $(this).scrollTop() - $(this).height(); 
      var percentScrolled = scroll_pos/(animation_end_pos - animation_mid_pos); 
      var newRed = middle_color.red() + ((ending_color.red() - middle_color.red()) * percentScrolled); 
      var newGreen = middle_color.green() + ((ending_color.green() - middle_color.green()) * percentScrolled); 
      var newBlue = middle_color.blue() + ((ending_color.blue() - middle_color.blue()) * percentScrolled); 
      var newColor = new $.Color(newRed, newGreen, newBlue); 
      $('body').animate({ backgroundColor: newColor }, 0); 
     } else if (scroll_pos > animation_end_pos) { 
      $('body').animate({ backgroundColor: ending_color }, 0); 
     } else if (scroll_pos < animation_begin_pos) { 
      $('body').animate({ backgroundColor: beginning_color }, 0); 
     } else { } 
    }); 
}); 

Answer 1

最简单的方法是，如果您将滚动位置计算为范围从0到1的数字并将您的颜色列入列表中。

然后，您可以计算出哪两种颜色可供选择（colors[n]和colors[n+1]）以及您需要多少混合它们（color1*(1-f)+color2*f）。

// list of colors 
var colors = [ 
    new $.Color('rgb(0,156,243)'), 
    new $.Color('rgb(36,40,47)'), 
    new $.Color('rgb(97,20,204)') 
]; 
$(document).scroll(function() { 
    // calculate scroll position 0-1 
    var scroll_pos = $(document).scrollTop(); 
    var height = $(document).outerHeight(); 
    var body_height = $(window).height(); 
    var pos = scroll_pos/(height-body_height); 

    // calculate which colors to pick and how much to mix them 
    pos *= colors.length-1; 

    var n = Math.floor(pos); 
    var f = pos % 1; 

    // prevent getting out of bounds color pick 
    if (n > colors.length-2) 
    { 
     n = colors.length-2 
     f = 1 
    } 

    // pick colors 
    var color1 = colors[n] 
    var color2 = colors[n+1]; 

    // mix the two colors 
    var color = new $.Color(
      Math.floor(color1.red()*(1-f) + color2.red()*f), 
      Math.floor(color1.green()*(1-f) + color2.green()*f), 
      Math.floor(color1.blue()*(1-f) + color2.blue()*f) 
    ); 

    // set the background color 
    $("body").css("background", color); 
}); 

jsFiddle

Answer 2

创建了一个功能，因此，它将与上市颜色的任何量，只要他们有0和1

var colorList = [ 
    { 
     color: new $.Color('rgb(0,156,243)'), 
     stop: 0 
    }, { 
     color: new $.Color('rgb(36,40,47)'), 
     stop: 0.25 
    }, { 
     color: new $.Color('rgb(97,20,204)'), 
     stop: 0.5 
    }, { 
     color: new $.Color('rgb(36,40,47)'), 
     stop: 0.75 
    }, { 
     color: new $.Color('rgb(0,156,243)'), 
     stop: 1 
    } 
]; 

function getGradientColor(colorList, percent) 
{ 
    percent = 0 || percent; 

    if (colorList.length < 1) 
    { 
     return new $.Color(); 
    } 

    for (var n = colorList.length - 1; n > 0; n--) 
    {  
     if (percent >= colorList[n].stop) { break; } 
    } 

    if (n > colorList.length - 2) 
    { 
     n = colorList.length - 2; 
     f = 1; 
    } 

    var f = Math.min((percent - colorList[n].stop)/(colorList[n+1].stop - colorList[n].stop), 1); 

    var color1 = colorList[n].color; 
    var color2 = colorList[n+1].color; 

    return new $.Color(
     Math.floor(color1.red()*(1-f) + color2.red()*f), 
     Math.floor(color1.green()*(1-f) + color2.green()*f), 
     Math.floor(color1.blue()*(1-f) + color2.blue()*f) 
    ); 
} 

$(document).scroll(function() { 
    var scrollPosition = $(this).scrollTop(); 
    var height = $('.tall').outerHeight(); 
    var body_height = $(window).height(); 

    // Ensure no divide by 0 
    var percent = (height > 0 ? scrollPosition/(height - body_height) : 0); 

    $("body").css("background", getGradientColor(colorList, percent)); 
}).trigger("scroll"); 

https://jsfiddle.net/fse62fpd/

之间的规则停止工作价值