0

jQuery を使用したページ遷移について、かなり率直な質問があります。Mac が起動からデスクトップの表示に移行するときの遷移をコピーしたいと思います。これにはjQueryを使用したいと思います。リダイレクトで私を助けてくれるリソースに出くわした人はいますか?

私が探しているトランジションに関するビデオをここで見ることができます: http://www.youtube.com/watch?v=-I9F4JswFXI

4

2 に答える 2

0

これは CSS3 トランジションを使用していますが、他のブラウザーでは正常にフォールバックします。基本的に、完全なページ ラッパー div を設定し、非表示にして少し小さくします。次に、.showクラスを制定すると、フルサイズと完全な不透明に移行します。

次に、ページの読み込み時にこれをトリガーします。ライオンとほぼ同じになるはずです。:)

CSS

#fullPageWrapper{
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -o-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0;
}

#fullPageWrapper.show{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    opacity:1;
}

jQuery

$(function(){
     $(window).on('load', function(){
          setTimeout(function(){
              $('#fullPageWrapper').addClass('show');
          },16);         
     });
});
于 2012-06-07T20:11:36.920 に答える
0

利用可能なリソースについてはわかりません。ただし、jQuery Fade (起動画面を非表示にするため)、Load (AJAX を使用して画像コンテンツを読み込むため)、および Zoom (起動時に画像を拡大するため) を使用して作成できます。

これらのリンクはあなたを助けます:

http://api.jquery.com/fadeOut/

http://api.jquery.com/load/

jQueryを使用してページの読み込み時にdivをズームする方法は?

于 2012-06-07T20:11:51.570 に答える