브라우저 창을 채우는 페이지로 세로로 스택 된 div를 어떻게 사용합니까?

Question

본질적으로 브라우저 창을 채우는 수직 '페이지'를 제공하는 몇 가지 웹 사이트에 영향을주었습니다. 예 :

http://www.bleed.no/

http://www.weworkonsunday.com/

첫 번째는 좋은 거래 깨끗하고 정교한입니다.

나는이 효과를 얻는 방법에 대해 수수께끼였습니다. 높이가 문제가 아니었다면 페이지 앵커 등으로 할 수있을만큼 간단 할 것입니다. 그러나 창 수직 (폭은 물론)을 채우는 것이 저를 버리는 것입니다.

실종 신고 방법이 있습니까? 아니면 모든 복잡한 자바 tomfoolery 무엇입니까? 어떤 도움

Answer 1

이 결과에 대한

많은 감사 일부 자바 스크립트 전문 지식을 (그런데 그게 전부 당신의 예에서 구현)이 필요 없습니다.

이 프로세스를 단순화하려는 jquery 라이브러리가 있습니다.

http://stephband.info/jparallax/

구현하는 간단한 방법이 정말없는있다하더라도 그래도. 그 이유는 효과가 레이아웃에 크게 의존하고 웹 사이트를 운영하는 "새로운"방법이기 때문입니다 ... 누군가 문제를 해결할 때까지는 시간이 걸릴 것입니다.

여기에 lib의 도움없이 설명 된 방식으로 시차를 구현하는 방법에 대한 또 다른 예가 나와 있습니다.

HOW-TO : http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/ 데모 : http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/index.html

는 "시차 스크롤 '을 검색 할 경우 많은 다른 자원을 찾을 수 있습니다.

Answer 2

개념적으로 저는 스택의 div가있는 세로 페이지를 모두 창 높이에 반응하는 같은 클래스로 빌드합니다 (또한 브라우저 크기가 조정될 때 반응합니다). jQuery를 사용하여 테스트되지 않은 코드 :

<div id="page1" class="page">content</div> 
<div id="page2" class="page">content</div> 
<div id="page3" class="page">content</div> 

<script> 

    // set up onResize event handler 
    window.onresize = onResizeScreen; 

    // run onResize event handler once on load 
    $.(function() { onResizeScreen(); }); 

    // onResize event handler 
    function onResizeScreen(event) { 
     $(".page").attr("height", screen.height); 
    } 

    // function to scroll to specific page 
    function gotoPage(pageNumber){ 
     window.scroll(screen.height*pageNumber-1); 
    } 

</script> 

<style> 
    .page { 
     width: 100%; 
    } 
</style> 

당신은 이러한 종류의 문제를 해결하는 새로운 소리. 위의 내용이 jQuery를 확인하고 JavaScript 이벤트를 처리하는지 알지 못하는 경우