테스트 사이트 - 개발 중인 베타 버전입니다

스크롤 내리면서 opacity 변경 채택완료

aaab 4년 전 조회 4,122

</p>

<p>        <div id="main">

                    <div class="pc-view" id="bg"></div>

        </div></p>

<p> </p>

<p> </p>

<p>$(window).ready(function(){

    var max = 500; //100% 투명할때의 스크롤 값

    $(window).scroll(function(){

        var scrollPX = $(this).scrollTop();

        if( scrollPX  < max ) {

            $("#bg").css({"opacity": (max-scrollPX)/max });

        }else{

            $("#bg").css({"opacity": 0});

        }    

    });

}); 

</script></p>

<p>

 

이런식으로 스크롤을 내리면 배경opacity 가 0이되어서 점점사라지게 했는데요!

 

저 div 이미지가 모니터 꽉차게한 이미지인데 마우스 스크롤은 한 3~4번만 내리면 끝나버려서

이거를 강제로 3~4번 내릴거를 30~40번으로 스크롤 내려야 다음으로 넘어가게 끔은 못하는건가요?ㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
X
4년 전

https://cssanimation.rocks/parallax/

 

요런 재밌는 자료도 있네용

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인