목차
- 배경색깔 변경
- 배경색 불투명도 조절
배경색깔 변경
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 500) {
$("body").css('background-color', 'blue');
} else {
$("body").css('background-color', 'red');
}
});
});
</script>
결과보기
PS. 핑크색 부분을 적당히 수정.
배경색 불투명도 조절
<style>
html,body {height:3000px; background:red;}
div {height:3000px; background:white; opacity:0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>홈짱닷컴 Homzzang.com</div>
</body>
<script>
$(document).ready(function(){
$(window).scroll(function(){
$('div').css("opacity", 0 + $(window).scrollTop() / 800)
})
})
</script>
결과보기
PS. 핑크색 부분을 적당히 수정.
