페이드 인 스크롤 효과

Question

여기서 찾은 스크립트를 추가했습니다. 그것은 대접을합니다. 그러나 페이드 효과를 적용하려고 할 때 막혔습니다. 분만에 그냥 사라집니다.

script type="text/javascript"> 


    $(document).ready(function() { 


     $(window).scroll(function() { 
       var height = $('body').height(); 
       var scrollTop = $('body').scrollTop(); 
       var opacity = 1; 


       if(scrollTop > 400) { 
        opacity = 0; 
       } 

      $('.social').css('opacity', opacity); 
     }); 
    }); 
</script> 

편집 : 나는 이것을 묶어서 작동합니다. 덕분에 너무 많은 사람은 :

<script type="text/javascript"> 
$(window).scroll(function() { 
// The social div 
var $socialDiv = $('.social'); 

//Get scroll position of window 
var windowScroll = $(this).scrollTop(); 

//Slow scroll of social div and fade it out 
$socialDiv.css({ 
'margin-top' : - (windowScroll/3) + "px", 
'opacity' : 1 - (windowScroll/550) 
}); 
}); 
</script>​ 

Answer 1

당신은 그 효과를 .animate() 또는 .fadeTo()을 사용해야합니다.

.css('opacity', opacity);을 사용하면 갑자기 사라지는 요소가됩니다.