스크롤로 배경 이미지 변경

Question

전체 브라우저에 적합하다고 생각되는 이미지가 많으며 스크롤하면 다음 사진으로 변경됩니다. 나는 이것에 초보자이고, 나는 정말로 내가하고있는 일을 전혀 모른다. 나는 이것을보고있다 : Create website background image that changes on a click은 기본적으로 내가 원하는 것이지만, 클릭을 바꾸는 대신 스크롤을 바꿀 것이다.

같은 개념인지 전혀 모릅니다 ... 어떤 아이디어입니까?

Answer 1

당신은 현재 스크롤 양 $ (몸)에 .css ('배경 이미지', '/i/image.jpg') 실제로 변화를 결정하기 위해 $ (창) .scrollTop()을 사용할 수 있습니다 배경 이미지.

$(window).scroll(function() { 
    var image_url = '/i/image1.jpg' 
    if ($(window).scrollTop() > 800) { 
     image_url = '/i/image2.jpg'; 
    } 
    $(body).css('background-image', "url('" + image_url + "')"); 
}); 

이것은 단지 개념입니다. 모든 이미지를 "배열"안에 배치하고 (예를 들면) 동적으로 적용 할 이미지를 결정해야합니다.