제이쿼리 스크롤시 화면이 페이드 되면서 나타나는 기능 알고싶어요
본문
예제 사이트 인데요
위 사이트 보면 밑으로 스크롤을 내리면
이미지나 텍스트 div(추정) 가 페이드 인 되면서 나열되는데요
이런 기능을 구현하고 싶습니다.
지금 3일째 제이쿼리 스크롤, 반응, 뭐 이런식으로 엄청 검색해봐도..
대부분 나오는게 탑버튼... 이런것 밖에 없어서
포기하다가 예전에 도움 많이 받은 sir 능력자분들은 아실까 해서 글 올립니다^^
부탁드립니다!!
답변 1
매 스크롤할때마다 자바스크립트로 스크롤값을 구해서
그 값을 최고치 까지를 기준으로 CSS의 불투명도값을 바꿔주는 겁니다.
--------------------------------------------
$(window).ready(function(){
var max = 1000; //100% 투명할때의 스크롤 값
$(window).scroll(function(){
var scrollPX = $(this).scrollTop();
if( scrollPX < max ) {
$("#bg").css({"opacity": (max-scrollPX)/max });
}else{
$("#bg").css({"opacity": 0});
}
});
});
------------------------
[ 샘플확인 ]
!-->
답변을 작성하시기 전에 로그인 해주세요.