제이쿼리 스크롤시 화면이 페이드 되면서 나타나는 기능 알고싶어요
본문
예제 사이트 인데요
위 사이트 보면 밑으로 스크롤을 내리면
이미지나 텍스트 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});
}
});
});
------------------------
[ 샘플확인 ]
너갱님 감사합니다.
어제 댓글이 없어서 포기하고 퇴근했는데
이렇게 뙇!!
정말 고맙습니다.
두번 고맙습니다^^**
근데 한가지 더 여쭈어볼께요~.
혹시 좌측이나 우측 위나 아래에서 등장하는 것도 가능할까요?
https://pixlr.com/desktop
보면 옆에서 나와서 페이드 인 되더라구요..
아 그리고 홈페이지 정보 감사합니다.
여러가지 도움되는게 많더라구요 ㅎㅎ
즐찾해놨어요 ㅎㅎ
답변달고 또 이것저것 보고 있는데 소스를 하나 찾은것 같아요
스크롤 값으로 객체를 움직이는 것 같은데
혹시 각 항에 어떤 기능을 하는지 주석 같은걸 달아주시면 안될까요?
성질이 급해서 qa 게시판에도 올렸어요..
qa에 답변 달리면 댓글에 표시 해놓을께요^^
항상 초보들은 도움만 바라네요^^ 정말 감사합니다!
<SCRIPT type=text/javascript>
$(function() {
var $window = $(window);
$('.content1').each(function(index) {
var $self = $(this);
var offsetCoords = $self.offset();
$(window).scroll(function() {
// If this section is in view
if (($window.scrollTop() + $window.height()) > offsetCoords.top && ((offsetCoords.top + $self.height()) > $window.scrollTop())) {
var yPos = -($window.scrollTop() / 8);
if ($self.attr('id') != 'first') {
yPos += 126;
}
var coords = '50%' + yPos + 'px';
$self.css('backgroundPosition', coords);
// Check for other sprites in this section
$('.sprite1', $self).each(function(index) {
var $sprite = $(this);
var yPos = -($window.scrollTop() / $sprite.data('speed')) + $sprite.data('offsety');
$sprite.css('left', yPos);
});
}
});
});
});
</SCRIPT>
