Question

我在jsfiddle上发现了这个很棒的代码，用于使用jQuery和Color插件在两个颜色之间淡出。我想要做的是能够在页面上向下滚动三种或更多颜色。我曾经尝试过（悲惨地失败）自己编辑代码但是对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

试试这个。它与原始代码的想法相同，但有一些小的补充。如果您想要使用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);
        }
    });
});

Answer 2

与Sterling的答案类似，我的第一次尝试是为第三种颜色插入另一个检查点。正如Sterling的解决方案一样，这个过程开始促成子功能的必要性。请在此处查看：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 );
}
});

希望这有帮助！

滚动时多色淡入淡出

2 个答案: