ウェブサイト上のページ遷移？

Question

ページ間を移動するときに素敵でスムーズなトランジションエフェクトを作成する方法があるかどうかは疑問でした。ブラインドエフェクト、スライディングエフェクトなどのようなものがあります。jQueryがイメージで何をすることができるのか、実際のWebページで探しているようです。私はフェード効果とそのすべてがあることを知っていますが、そこにもっと「近代的な」ものがあるかどうか疑問に思っていました。私はFlashがこれに適していると認識していますが、それは選択肢ではありません。

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という非常に簡単な実装ですが、MozillaやSafariのような他のブラウザでは動作しません。