ウェブページ全体をスライドさせる方法は？例えば

Question

- http://www.tumblr.com

ログアウトして「ログイン」は、「あなたがTumblrのを好きになる理由30個の理由」、（特に興味深い）「サインアップ」ボタンをクリックしてください。

このスライドエフェクトの作成方法は？

P.S：私は働くコードを提供するのではなく、ガイドラインとアドバイスをお願いします。

UP：私は可能な解決策を見つけたようです。 tumblr jsファイルのコード。

return new Effect.Move(element, { 
x: initialMoveX, 
y: initialMoveY, 
duration: 0.01, 
beforeSetup: function(effect) { 
    effect.element.hide().makeClipping().makePositioned(); 
}, 
afterFinishInternal: function(effect) { 
    new Effect.Parallel(
    [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }), 
     new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }), 
     new Effect.Scale(effect.element, 100, { 
     scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, 
     sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true}) 
    ], Object.extend({ 
     beforeSetup: function(effect) { 
      effect.effects[0].element.setStyle({height: '0px'}).show(); 
     }, 
     afterFinishInternal: function(effect) { 
      effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle); 
     } 
     }, options) 
); 
} 

Answer 1

あなたは自分のページで使用したスクリプトとCSSをチェックしましたか？ ちょっと調べてみると、手がかりを得る方法がわかります。

Answer 2

私は自分のサイトでもこの効果を出しました。私はtumblrがそれをどうやって行ったのかわからないが、私は自分のやり方を考え出している（例としてtumblrの効果のために）：

ステップ1.新しいURLにリダイレクトする前に、トップセクションとき

---

document.ready新しいURLダウン現在のページの
ステップ2.スライド年後のアップデート：私はちょうど新しい投票アップを持っているので、私はこの古いを発見

答えは少し古くなっています。

最新のjavascriptでは、history.pushstateを使用するだけで、すべてのエフェクトが1ページで実行されます。 jsでページの内容を変更した後、pushstateを使用してURLを変更することができます。これにより、エフェクトを使用してナビゲートするようになります。

pushstate詳細情報は、あなたがここにフルページのスライドのワーキングデモを見つけることができますhttps://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Answer 3

を参照してください。両方ともに、このためにrequirdされているようhttp://acarna.com/full-page-slide.php

は、ソースとCSSを見ます作業。ある注意すべき主なキー...

• あなたはこのコンテナはそのoverflowプロパティを持っている必要があります2（またはそれ以上）の画面サイズのページが保持されたコンテナ（私のデモで#wrapper）
• が必要

は、あなたはすべてのスクリプトやコードを表示するには、Firefoxでは、Firebugのアドオンを使用することができます（この場合にはウィンドウのサイズが変更された）