세로 사이트에 여러 개의 전체 화면 배경 이미지

Question

JQuery ScrollTo 플러그인을 사용하여 다음 수직 사이트 LINK을 만들었습니다. 기본 페이지 아키텍처는 다음과 같습니다.

<div id="fixed-menu"> 
    <!-- MAIN MENU FIXED TO TOP OF WINDOW --> 
</div> 

<div id="wrapper"> 
    <div id="mask"> 
      <div id="page1"> 
      <!-- PAGE 1 CONTENT --> 
      </div> 
      <div id="page2"> 
      <!-- PAGE 2 CONTENT --> 
      </div> 
      <div id="page3"> 
      <!-- PAGE 3 CONTENT --> 
      </div> 
      <div id="page4"> 
      <!-- PAGE 4 CONTENT --> 
      </div> 
    </div> 
</div> 

제 문제는 각각의 '페이지'마다 전체 화면 배경 이미지를 얻으려고 할 때입니다. 나는 Jquery 플러그인 Fullscreenr을 사용하여 다른 화면 해상도 등에 적절히 적응하는 배경 이미지를 만들었습니다. 그러나 사이트의 각 '페이지'마다 다른 설정을하는 방법은 익숙하지 않습니다. 어떤 대안이 어떤 메뉴 항목이 선택되었는지에 따라 배경 이미지의 변화를 유발할 수 있다고 생각해 왔습니다. 이 문제에 대해 경험이나 조언이있는 사람이 있습니까? 이미지 스태킹을 시도했지만 사이트의 어느 지점에서나 부분 배경 이미지를 보지 않으려합니다.

Answer 1

JQuery Waypoint가 성공적으로 작동하는 데 어려움을 겪었으므로 관련 제목을 마우스로 클릭 한 후에 배경 이미지를 간단히 변경했습니다. 사이트는 자동 스크롤 (마우스 휠 기능 없음)이기 때문에 정상적으로 작동합니다. 다음과 같이

사용하는 JQuery와 코드는 다음과 같습니다

<script type="text/javascript"> 
$(function() { 
    $('a.panel-about').click(function(){ 
    $("#bgimg").attr('src',"<?php bloginfo('stylesheet_directory'); ?>/images/bg2.jpg"); 
    return false; 
    }); 
}); 
</script> 

그래서 '패널에 대한'를 클릭하면, 배경 이미지 변경 클래스와 함께 링크에 지정된 기존 bg1.jpg에서 bg2.jpg하는 경우 html.

Answer 2

Jquery 경유지를 살펴보십시오. 기본적으로 사이트가 특정 지점으로 스크롤 할 때 자바 스크립트 이벤트를 실행할 수 있습니다. http://imakewebthings.com/jquery-waypoints/

페이지에 각 "페이지"가 ​​나타나는 지점을 설정하고 그에 따라 배경 이미지를 변경하십시오.