Change background color multiple times while scrolling down the page

故事扮演 提交于 2020-01-15 05:44:12

问题


I'm working on this project where I’m creating a website using parallax scrolling. It's supposed to be one long one pager. As you scroll down the page the background color is supposed to change when you get to each new section of the page.

I have spent days searching the web and also here on stackoverflow, but I haven't found anything that works in the way i want it to.

I found this script here on stack:

 var tStart = 100 // Start transition 100px from top
      , tEnd = 500   // End at 500px
      , cStart = [250, 195, 56]  // Gold
      , cEnd = [179, 217, 112]   // Lime
      , cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[1] - cStart[0]];

    $(document).ready(function(){
        $(document).scroll(function() {
            var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
            p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
            var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
            $("body").css('background-color', 'rgb(' + cBg.join(',') +')');
        });
    });

http://jsfiddle.net/dtZDZ/12/ Here is the fiddle

This script does exactly what I want, except that I only change color one time back and forth. I need it to change background color like 4-5 times while you scroll down the page. Also I would like it to have a smooth transition when changing colors like in the fiddle :)

I hope someone out there can help me with this or just point me in the right direction.

Thank you in advance


回答1:


You could use a gradient background using css :

body {
background-color: linear-gradient(red, blue, green, blue, red)
}

Scrolling down, your background will change. This method is a little bit "cheaty", but it works as it will loop when it arrives at the end of the background.




回答2:


Here you go :

You may assign as many colors as you like in your colors variable

var colors = [
     [250, 195, 56], // Gold
     [250, 0, 0],    // Red
     [0, 250, 0],    // Green
     [0, 0, 250],    // Blue
     [179, 217, 112] // Lime
];

var height = $('body').height() - window.innerHeight;

$(document).scroll(function() {
  var steps = Math.floor(height / colors.length);
  var position = $(this).scrollTop();
  var currentStep = Math.floor(position / steps);
  if ( currentStep === colors.length ) currentStep = colors.length - 1;
  var rgb = $("body").css('background-color').replace('rgb(','').replace(')','').replace(/\s/g, '').split(',');     
  var previousColor = colors[currentStep] || colors[0];
  var nextColor = colors[currentStep+1] || colors[colors.length-1];
  var percentFromThisStep = ( position - ( currentStep * steps ) ) / steps;
  if ( percentFromThisStep > 1 ) percentFromThisStep = 1;

  var newRgb = [
     Math.floor(previousColor[0] + ( ( nextColor[0] - previousColor[0] ) * percentFromThisStep )),
     Math.floor(previousColor[1] + ( ( nextColor[1] - previousColor[1] ) * percentFromThisStep )),
     Math.floor(previousColor[2] + ( ( nextColor[2] - previousColor[2] ) * percentFromThisStep ))
  ];

  $("body").css('background-color', 'rgb('+ newRgb.join(',') +')');
});

Demo here : http://jsbin.com/ulohif/1/edit



来源:https://stackoverflow.com/questions/16414666/change-background-color-multiple-times-while-scrolling-down-the-page

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!