아래로 스크롤 할 때 배경색을 변경하는 방법

사용자가 아래로 스크롤 할 때 배경색을 변경하는 코드가 있지만 배경을 두 번 부드럽게 변경하려면 페이지가 필요합니다 (예 : 회색 @ 단락 1, 노란색 @ 2 단락, 3 단락). 누구든지이 작업을 수행하는 방법을 알고 있습니까?아래로 스크롤 할 때 배경색을 변경하는 방법

내 코드 :

$(document).ready(function(){ 
    $(document).scroll(function() { 
     var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop()/3000, 0.9); 
     var channel = Math.round(alpha * 255); 
     $("body").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')'); 
    }); 
});

결과 :

www.web-app.be/op

출처

2012-05-21 Timmy D' Hooghe

을 의미합니까? – ToddBFisher

이것을 조작 할 수 있습니까? http://stackoverflow.com/questions/4222611/how-to-get-a-vertical-gradient-background-to-work-in-all-browsers - # FFFFF를 # F00으로 변경하면 빨간색에서 회색으로 변합니다. 그라디언트 – mplungjan

www.web-app.be/op/를 참조하십시오. 회색에서 흰색으로 아래로 스크롤하면 색상이 변경되며 3 단으로 스크롤하면 세 번째 색상으로 변경해야합니다. –

당신이와 함께 시작할 수 있습니까? 당신은 "두 번"의 배경을 변경하여 무엇을

How to get a vertical gradient background to work in all browsers?

<!DOCTYPE html> 
<html> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Scroll changes bg</title> 
<style> 
#gradient1 { 
    background: #FFFFFF; /* old browsers */ 
    background: -moz-linear-gradient(top, #F00 0%, #CCCCCC 100%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#CCCCCC)); /* webkit */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC',GradientType=0); /* ie */ 
} 
#gradient2 { 
    background: #FFFFFF; /* old browsers */ 
    background: -moz-linear-gradient(top, #FF0 0%, #CCCCCC 100%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#CCCCCC)); /* webkit */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC',GradientType=0); /* ie */ 
} 

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(document).scroll(function() { 
     var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop()/3000, 0.9); 
     var channel = Math.round(alpha * 255); 
     $("body").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')'); 
    }); 
}); 

</script> 
</head> 

<body> 

<div id="gradient1<li></li>"> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
</div> 
<div id="gradient2"> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
</div> 

</body> 

</html>

출처

2012-05-21 14:09:07 mplungjan

아래로 스크롤 할 때 배경색을 변경하는 방법

답변

관련 문제