불투명도에서 이미지가 흐려짐 : 위치가 0 일 때 불투명도가 1이됩니다.

Question

사용자가 위치에 도달했을 때 이미지에 페이드 인 효과를 생성하는 코드를 검색했지만 코드가 계속됩니다. 부분적으로 작동하거나 전혀 작동하지 않습니다. 나는 그것을 던지고있는 나의 CSS 위치 일 수 있었다는 것을 생각하고있다 그러나 나는 틀릴 수 있었다. 누군가 내 실수를 지적 할 수 있다면 이것은 분명히 나뿐만 아니라 비슷한 문제를 가진 다른 사람들을위한 주제를 정리하는 데 도움이 될 것입니다. 여기

내가 (이미지 만이 아닌 사업부로) 모방하기 위해 노력하고있어 바이올린입니다 : 나는 "나를 숨기"클래스로, 내 웹 사이트에 바이올린 코드 위의 모든 이미지를 통합 http://jsfiddle.net/tcloninger/e5qaD/

내가 그들을 도달했을 때 한 번에 하나씩이 아니라 한꺼번에 사라질 것입니다. 그래서 필자는이 피들이가 요소 위치를 더 잘 감지 하는지를 알아 냈습니다. http://jsfiddle.net/moagrius/wN7ah/

이로 인해 이미지가 전혀 희미 해지지 않았습니다.

코드를 .hideme 클래스의 위치를 ​​감지하고 불투명하게하는 것이 창에있을 때 : : 여기가 함께 사용하려고 해요 내 코드의 조각이다의

$(document).ready(function() { 

$.fn.isOnScreen = function(){ 

var win = $(window); 

var viewport = { 
    top : win.scrollTop(), 
    left : win.scrollLeft() 
}; 
viewport.right = viewport.left + win.width(); 
viewport.bottom = viewport.top + win.height(); 

var bounds = this.offset(); 
bounds.right = bounds.left + this.outerWidth(); 
bounds.bottom = bounds.top + this.outerHeight(); 

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 
}; 

$(window).scroll(function() { 
    if($('.hideme').isOnScreen()){ 
     $('.hideme').animate({'opacity':'1'},500); 
}); 

예 DIV 어떻게 내 HTML을 설정하고 .hideme 클래스입니다 : 여기에 문제가 위치하는 경우에는

<div id="two" class="page"> 
<img src="img/splithead.png" alt="divided attention" class="icons vandhcenter"/> 
<div class="abs"> 
<img src="text/div2.png" alt="section two text" class="text hideme"/>  
</div> 
</div> 

내 CSS의 발췌입니다 :

div.page 
{ 
display:block; 
height:100%; 
position:relative; 
width:100%; 
} 

img.icons 
{ 
height:600px; 
width:800px; 
} 

.vandhcenter 
{ 
margin: auto; 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 
} 

img.text 
{ 
float:left; 
position:relative; 
width:800px; 
} 

.hideme 
{ 
opacity:0; 
} 

이렇게 모든 목록이이 목록에서 혼란스러워 보이는 경우 jsfiddle 링크가있어서 모든 코드를 볼 수 있습니다. 모든 이미지 파일을 업로드하지 않았기 때문에 실제 출력이 없지만 코드를 보는 것이 더 쉬울 수 있습니다. jsfiddle, net/uxB4D/

Answer 1

'지연로드'와 같이 들릴 수도 있습니다. 이미 이렇게하는 꽤 많은 플러그인이 있습니다. http://www.appelsiini.net/projects/lazyload