Div를 사용하여 텍스트를 계속 이동하십시오.

Question

스크롤을 어둡게하는 이미지를 얻으려고합니다.

here 그러나 그 아래의 텍스트와 메뉴는 그림에서 너무 멀리 떨어져 있습니다. 브라우저를 작게 만들면 거리가 커집니다.

스크롤 할 때 텍스트가 이미지 위에 겹쳐지는 방식을 유지하고 싶습니다. JSFiddle의 부족에 대한 this.

Aplogoise 비슷한 스타일 - 그것을 얻이 수없는 것.

this으로 변경하려고 시도했지만 이미지를 스크롤하는 텍스트가 손실됩니다 (예 : FearTheGrizzly ref).

요약하면 짧은 텍스트 - 텍스트를 이미지 상단에 가깝게 배치하고 싶습니다. 브라우저로 이동하십시오.

Answer 1

background-size:100% auto;로 인해 브라우저의 크기를 조정할 때 배경 이미지의 높이가 변경되지만 요소 자체가 업데이트되지 않는 문제가 있습니다. 배경색 대신 CSS로 실제로 크기를 조정하여 문제를 해결할 수 있습니다. 이미지 만의 당신이 그렇게하고 싶지 않아 가정하자이 경우 당신은 자바 스크립트를 사용하여 DIV의 크기를 조정해야하므로 내용의 나머지 부분은 (는) 정확한 위치에 나타납니다 :. 다음 물론

$(document).ready(function() { 
    $homeDiv = $('.home'); 
    $(window).resize(); //call this onload to make sure the div is initially right 
}); 
$(window).resize(function() { 
    ($homeDiv).height($(window).width()/1440 * 600); 
    console.log($(window).width()/1440 * 600); 
}); 

당신의 페이딩 당신이 기대하고있는 방식으로 작동, 그래서 너무 당신의 JS의 'opacity' 줄을 변경되지 않을 수 있습니다

'opacity' : 1 - windowScroll/($(window).width()/1440 * 600 - 30) 

크기가 일관된 이미지를 사용합니다. 이 사실을 모른 채 할 수있는 방법이 있습니다.하지만이 방법이 가장 쉽습니다.