• Q&A
  • 회원가입
  • 로그인

[ETC] JQ - 스크롤 시, (배경색 변경 + 불투명도 조절). (= scroll background opacity change)

예제1 - 색깔 변경

 

<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. 핑크색 부분을 적당히 수정.

 

예제2 - 불투명도 조절

 

<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. 핑크색 부분을 적당히 수정.

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012