웹 사이트 Deconstruction : Ajax 페이지로드 후

Question

이 효과를 재현하려고하는데, 자바 스크립트에 익숙하지 않은 독자는이 사이트를 혼자서 해체해야합니다.

http://www.serialcut.com/
http://www.ultranoir.com/
http://kikk.be/
http://www.marcusthomasllc.com/ : 여기에 내가 찾고 있어요 효과 (만 탐색)과 함께 사이트입니다

• 현재 페이지/섹션의 너비가 100 %이므로 응답 성이 뛰어나고 다른 섹션의 콘텐츠가 표시되지 않도록하겠습니다.
• 새 페이지를로드 할 때로드하는 gif가 멋진 터치 (선택 사항)
• 마지막으로 여기가 아약스가 들어오는 곳입니다. 내가 페이지에있어 경우, 접촉에서 한 페이지 만 슬라이드가 접촉 말을 나는 집을 클릭 사이에 집 아니라 모든 페이지를 합니다.

누구나 실제로 이러한 사이트를 무너 뜨릴 것이라고 기대하지 않지만 올바른 방향으로 밀고 나가기를 바랍니다. 어쩌면 사용할 수있는 jQuery 플러그인이나 기본 개념이있을 수 있습니다. 이 사이트를 검색했지만 간단한 jQuery 슬라이드 인 효과 만 찾을 수 있습니다.

시간 내 주셔서 감사합니다. 건배

Answer 1

다음은 몇 가지 옵션입니다.

이 튜토리얼 : http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

JQuery와 scrollTo 플러그인 : http://demos.flesler.com/jquery/scrollTo/

초대형 플러그인 : http://buildinternet.com/project/supersized/

아니면이 튜토리얼 :

http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ 그냥 사용 구글, 거기에 수천 예와 플러그인이 포함 된 수천 페이지가 있습니다. 여기

Answer 2

나중에는 jQuery를 사용하여 이동 : 당신은 복잡한 마음을하지 않는 경우

var slideAjax = function(elementid, url, data){ 
     $('#'+elementid).hide(); //make sure the div we are loading into is hidden 
     $.ajax({ 
      url: url, 
      type: 'POST', 
      data: data, 
     }).done(function(data)){ 
      $('#'+elementid).html(data).show('slide',{direction: 'right'}, 200); //slide in 
     }); 
    } 

, 당신은 (200)와 같은 ms의 시간 길이에 로더 HTML을 전달할 수있는에서는 setTimeout을 만들 수 있습니다. 그런 다음 done 함수로 타이머를 지 웁니다. 이렇게하면 페이지가로드되는 데 200ms 이상이 걸리면 로더 만 표시됩니다. 벨 커브에로드 시간을 플로팅 할 수있는 경우 유용합니다. 일반적으로 페이지의 로딩 시간은 0과 X 또는 Y와 무한대 사이에서 걸릴 반전 된 벨 곡선에 위치합니다. Y를 매핑 할 수 있다면 Y에서 시작하도록 로더를 설정할 수 있습니다. 그러면 초 단위로 표시되고 잘라내 지 않습니다.