多個顏色淡入淡出

Question

我在jsfiddle上找到了這段偉大的代碼，用於使用jQuery和Color插件在兩個顏色onScroll之間淡入淡出。 我想要做的是能夠在頁面上向下滾動三個或更多顏色。 我已經嘗試過（失敗悲慘）自己編輯代碼，但對JS和jQuery來說太新了。 請幫忙嗎？

$（文件）。就緒（函數（）{

//** notice we are including jquery and the color plugin at 
//** http://code.jquery.com/color/jquery.color-2.1.0.js 

var scroll_pos = 0; 
var animation_begin_pos = 0; //where you want the animation to begin 
var animation_end_pos = 1000; //where you want the animation to stop 
var beginning_color = new $.Color('rgb(210,50,98)'); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here. 
var ending_color = new $.Color('rgb(0,197,209)'); ;//what color we want to use in the end 
$(document).scroll(function() { 
    scroll_pos = $(this).scrollTop(); 
    if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos) { 
     // console.log('scrolling and animating'); 
     //we want to calculate the relevant transitional rgb value 
     var percentScrolled = scroll_pos/(animation_end_pos - animation_begin_pos); 
     var newRed = beginning_color.red() + ((ending_color.red() - beginning_color.red()) * percentScrolled); 
     var newGreen = beginning_color.green() + ((ending_color.green() - beginning_color.green()) * percentScrolled); 
     var newBlue = beginning_color.blue() + ((ending_color.blue() - beginning_color.blue()) * percentScrolled); 
     var newColor = new $.Color(newRed, newGreen, newBlue); 
     //console.log(newColor.red(), newColor.green(), newColor.blue()); 
     $('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 { } 
}); 

}）;

這裏是小提琴： http://jsfiddle.net/cgspicer/V4qh9/

Answer 1

斯特林的回答一樣，我的第一次嘗試是一種插入另一檢查點爲第三顏色。像斯特林的解決方案一樣，這個過程開始促成子功能的必要性。 見這裏：http://jsfiddle.net/5uU6y/1/

一個更好，更完整的解決方案，在其中你可以聲明多種顏色，可以通過創建存儲你的開頭，結尾的陣列來實現，和顏色值，你可以覈對窗口時滾動。

下面是該溶液（看到它在這裏的行動：http://codepen.io/cgspicer/pen/tomvq/）

$(document).ready(function(){ 
/** 
requires http://code.jquery.com/color/jquery.color-2.1.0.js 
*/ 

var colorsNPoints = [ 
    { 'begin' : 0, 'end': 100, 'color': 'rgb(220,20,60)' }, 
    { 'begin' : 100, 'end': 110, 'color': 'rgb(0,0,0)' }, 
    { 'begin' : 110, 'end': 210, 'color': 'rgb(50,205,50)' }, 
    { 'begin' : 210, 'end': 310, 'color': 'rgb(255,215,0)' }, 
    { 'begin' : 310, 'end': 410, 'color': 'rgb(220,20,60)' }, 
    { 'begin' : 410, 'end': 420, 'color': 'rgb(0,0,0)' }, 
    { 'begin' : 420, 'end': 520, 'color': 'rgb(50,205,50)' }, 
    { 'begin' : 520, 'end': 620, 'color': 'rgb(255,215,0)' }, 
    { 'begin' : 620, 'end': 720, 'color': 'rgb(220,20,60)' }, 
    { 'begin' : 720, 'end': 730, 'color': 'rgb(0,0,0)' }, 
    { 'begin' : 730, 'end': 830, 'color': 'rgb(50,205,50)' }, 
    { 'begin' : 830, 'end': 930, 'color': 'rgb(255,215,0)' } 
]; 

$(document).scroll(function() { 
    var scrollPosition = $(this).scrollTop(); 
    var currentRange = checkRange(scrollPosition, colorsNPoints); 

    if (currentRange !== undefined) { 
    console.log(currentRange); 
    var newColor = recalcColor(currentRange.prevColor, currentRange.nextColor, currentRange.progress); 
    $('body').css({ backgroundColor: newColor }, 0); 
    } else { 
    // do nothing, we're not within any ranges 
    } 
}); 

// sub-functions 
/** 
* checks which, if any, of the scroll ranges the window is currently on 
* returns an object containing necessary values 
*/ 
function checkRange(yValue, rangesObj) { 
    // loop over the object containing our ranges 
    for (var i=0; i < rangesObj.length; i++) { 
    var rangeToCheck = rangesObj[i]; 
    // check to see if we are within said range 
    if (yValue >= rangeToCheck.begin && yValue <= rangeToCheck.end) { 
     // set up a new object for refinement and return 
     var currentRangeObj = {}; 

     currentRangeObj.prevColor = rangesObj[i-1] ? rangesObj[i-1].color : rangeToCheck.color; // store old color, falls back to range's color if no previous color exists 
     currentRangeObj.nextColor = rangeToCheck.color; // store new color 
     currentRangeObj.progress = calcPercentScrolled(rangeToCheck.begin, rangeToCheck.end, yValue); //calculate the progress within the current range 
     return currentRangeObj; 
    } else { 
    } 
    } 

} 

/** 
* calculates current percent scrolled 
**/ 
function calcPercentScrolled(begin, end, current) { 
    return (current - begin)/(end - begin); 
} 
/** 
* calculates new color 
**/ 
function recalcColor(begin, end, factor) { 

    var begin = $.Color(begin), 
     end = $.Color(end); 
    var newRed = begin.red() + ((end.red() - begin.red()) * factor); 
    var newGreen = begin.green() + ((end.green() - begin.green()) * factor); 
    var newBlue = begin.blue() + ((end.blue() - begin.blue()) * factor); 
    return $.Color(newRed, newGreen, newBlue); 
} 
}); 

希望這有助於！

Answer 2

試試這個。這與原來的代碼有相同的想法，但有一些小的增加。如果你想用Javascript做一些練習，你可以嘗試使用相同的想法，使用一系列開始位置，結束位置和開始顏色來實現n種顏色。 （和更好的實現）

Fiddle

$(document).ready(function(){ 
    //** notice we are including jquery and the color plugin at 
    //** http://code.jquery.com/color/jquery.color-2.1.0.js 
    var body_end = $(document).height()/; 
    var animation_begin_pos = 0; //where you want the animation to begin 
    var animation_middle_pos = body_end/3; 
    var animation_end_pos = body_end/(3/2); //where you want the animation to stop 

    var beginning_color = new $.Color('rgb(210,50,98)'); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here. 
    var middle_color = new $.Color('rgb(255,0,0)'); 
    var ending_color = new $.Color('rgb(0,197,209)'); ;//what color we want to use in the end 
    /* */ 
    function getPercentScrolled(scroll_pos, beginning_pos, end_pos){ 
     return (scroll_pos - beginning_pos)/(end_pos - beginning_pos); 
    } 

    function getNewRGB(start_color, end_color, percentScrolled){ 
     var newRed = start_color.red() + ((end_color.red() - start_color.red()) * percentScrolled); 
     var newGreen = start_color.green() + ((end_color.green() - start_color.green()) * percentScrolled); 
     var newBlue = start_color.blue() + ((end_color.blue() - start_color.blue()) * percentScrolled);   
     console.log(newRed, newGreen, newBlue); 
     console.log(percentScrolled); 
     newRed = ((newRed > 0.0) ? newRed : 0.0); 
     newGreen = ((newGreen > 0.0) ? newGreen : 0.0); 
     newBlue = ((newBlue > 0.0) ? newBlue : 0.0); 

    return {red: newRed, green: newGreen, blue: newBlue}; 
    } 
    $(document).scroll(function() { 
     var scroll_pos = $(this).scrollTop(); 

     if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_middle_pos) { 
      //we want to calculate the relevant transitional rgb value 
      var percentScrolled = getPercentScrolled(scroll_pos, animation_begin_pos, animation_end_pos); 
     var updatedColor = getNewRGB(beginning_color, middle_color, percentScrolled); 
      var newColor = new $.Color(updatedColor['red'], updatedColor['green'], updatedColor['blue']); 
      $('body').animate({ backgroundColor: newColor }, 0); 
     } 
     else if (scroll_pos >= animation_middle_pos && scroll_pos < animation_end_pos) { 
      percentScrolled = getPercentScrolled(scroll_pos, animation_middle_pos, animation_end_pos); 
      updatedColor = getNewRGB(middle_color, ending_color, percentScrolled); 
      newColor = new $.Color(updatedColor['red'], updatedColor['green'], updatedColor['blue']); 
      $('body').animate({ backgroundColor: newColor }, 0); 
     }  
     else if (scroll_pos > animation_middle_pos) { 
      $('body').animate({ backgroundColor: ending_color }, 0); 
     } 
     else if (scroll_pos < animation_begin_pos) { 
      $('body').animate({ backgroundColor: beginning_color }, 0); 
     } 
    }); 
});