웹 사이트에서 페이지 전환이 발생 했습니까?

Question

페이지 사이를 이동할 때 멋지고 부드러운 전환 효과를 만드는 방법이 있는지 궁금한가요? 블라인드 효과, 슬라이딩 효과 등과 같은 것들이 있습니다. jQuery가 이미지로 할 수있는 것과 같은 것을 찾고 있습니다. 그러나 실제 웹 페이지에서는 그렇습니다. 페이드 효과와 모든 것들이 있다는 것을 압니다 만, 거기에 더 근사한 것이 있는지 궁금합니다. 플래시가이 문제에 잘 어울리는 것은 알고 있지만 옵션이 아닙니다.

Answer 1

jQuery UI를 사용하면 멋진 효과를 얻을 수 있습니다. AJAX를 사용하여 모든 것을로드하면 훨씬 더 부드럽게 돌아갈 것입니다. 그러나 전체 페이지로드로 작업하는 예제가 있습니다.

<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script> 

그리고 여기 당신이 그것을 작동하게하는 데 필요한 자바 스크립트의 첫째는 당신이 필요로하는

추가로 jQuery를 UI를 (난 그냥 built my own 만 내가 필요로하는 효과를 잡고)를 포함한다. 난 그냥 좀 그것을 그렇게 몇 분 안에이 만들 않았다

그냥 메모 만에이 스크립트를이 페이지에서 작동하는 것입니다 페이드 물론

$(function() { 
    $('body').hide(); 
    $('a').bind('click', function() { 
     var newPage = $(this).attr('href'); 
     $('body').hide('blind',{},500, function() { 
      newPageParts = newPage.split('?'); 
      newPageURL = newPageParts[0]; 
      newPageParams = newPageParts[1]; 
      newPage = newPageURL+"?transition=true"+(newPageParams != undefined ? "&"+newPageParams : ''); 
      window.location=newPage; 
     }); 
     return false; 
    }); 
    if(getURLParam('transition') != '') { 
     $('body').show('blind',{},500,null); 
    } 
}); 

function getURLParam(strParamName){ 
    var strReturn = ""; 
    var strHref = window.location.href; 
    if (strHref.indexOf("?") > -1){ 
     var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase(); 
     var aQueryString = strQueryString.split("&"); 
     for (var iParam = 0; iParam < aQueryString.length; iParam++){ 
      if (aQueryString[iParam].indexOf(strParamName + "=") > -1){ 
       var aParam = aQueryString[iParam].split("="); 
       strReturn = aParam[1]; 
       break; 
      } 
     } 
    } 
    return strReturn; 
} 

, ... 진짜 빈민굴일지도 몰라. 그러나 그것은 작동합니다 ... 그래서 ... 예 ...

Answer 2

IE는 page transition effects의 매우 간단한 구현을 가지고 있지만, 나는 그들이 모질라와 사파리 같은 다른 브라우저에서 작동하지 않을 것이라고 생각합니다.