2

別のページへのリンクがページをロードする代わりに、次のページを次のページにスライドさせるページ遷移を実現しようとしています。MOVEこのデモ サイトのトランジションのようなもの: http://tympanus.net/Development/PageTransitions/
これはすべて 1 つのページであるため (つまり、URL は変更されない)、完全に正しくはありませんが、これらの間のトランジションである必要があります。別のページ。

私はこのようなものまで得ました:
HTML:

<body>
    <div class="container">
        <a href="next-page.html" class="slide_page">Link</a>
        TEXT GOES HERE
    </div>
</body>

jQuery:

$(function(){
    // hide the div on page load and use a slidedown effect
    $('div.container').fadeOut(0, function(){
        $(this).slideDown(500);
    });
    // capture link clicks and slide up then go to the links href attribute
    $('a.slide_page').click(function(e){
        e.preventDefault();
        var $href = $(this).attr('href');
        $('div.container').slideUp(500, function(){
            window.location = $href;
        });
    });

});

しかし、このメソッドは現在のページを上にスライドさせてから、次のページを下にスライドさせるため、これは正しくありませんが、ここでの URL の変更は適切です。どんな提案でも大歓迎です！

4

3 に答える 3

2

私がこれを正しく理解した場合、何かをスライドさせたいのですが、任意の div をスライドさせるだけでなく、まったく新しい Web ページをスライドさせたいですか?

あなたができることは、AJAXを使用することです。したがって、基本的には ajax リクエストを作成し、データを受け取ったら #next-page.html() を受け取ったデータに変更します。

ただし、ここでそれらを循環させる必要があるため、「#active-page」を設定する方がおそらく優れています。

私が利用したサイトはこちらです。http://cs75.heliohost.org/リンクをクリックするとスライド アニメーションが表示されますが、スライドの html を編集すると、そのスライドする四角形に新しいページを配置できたはずです。

必要なものは次のとおりです。

  • 2 つの「ページ」。これらを再利用することになります。

  • ユーザーがリンクをクリックすると、ajax 呼び出しが行われ、'inactive-Page' が受け取ったデータに置き換えられます。

  • 「非アクティブ ページ」をアクティブにしてから、アニメーションを適用します。

  • 差し替えたページを「inactive-Page」にする

私の答えに漠然とした何かがあれば、遠慮なく聞いてください。

于 2013-08-02T13:37:43.187 に答える
1

アニメーションについて：

両方を上にスライドさせたい場合は、両方に上にスライドするように指示する必要があります。したがって、「slideDown」の代わりに「slideUp」を使用してください。

ページのソースを見ると、ほとんどの作業に実際に CSS アニメーションを使用していることがわかります。これにより、一度に 2 つのアニメーションを簡単に実行できるようになり、ブラウザーがハードウェア アクセラレーションを使用してアニメーションを処理できるようになります (jQuery と一般的な JS は、デフォルトでアニメーションをキューに入れる傾向がありますが、queue:false を追加してアニメーションを一度に実行させることができます)。同時に、JavaScript はまだハードウェア アクセラレーションにアクセスできません)。

これらのアニメーションのキーストーンはanimations.css ファイルにあります。下部にある名前付きキーフレームとその機能に注目してください。

@-webkit-keyframes moveToTop {
    to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveToTop {
    to { -moz-transform: translateY(-100%); }
}
@keyframes moveToTop {
    to { transform: translateY(-100%); }
}

そのようなキーフレームにする必要はありません。要素 (またはクラス) 自体に組み込むことができます。同じアニメーションを何度も何度も使用するため、名前付きのキーフレームを使用していると思います。ただし、変換は、それらを上に移動させるものです（または、必要な他の方向に移動します）。

URLの変更について：

機能を自分で書こうとする代わりに、Pjaxを調べることをお勧めします。探しているページ スライドを GitHub に実行させるライブラリです。他に何もないとしても、ソースを見て、彼らがどのようにそれを行うかを見ることができます.

それがどのように機能するかは、AJAX と PushState (名前の由来) を組み合わせることです。リンクをクリックすると、JavaScript がデフォルトのクリック動作をオーバーライドし、AJAX 呼び出しを行って新しいコンテンツを取得します。次に、ブラウザーの URL を更新する PushState 呼び出しをアクティブにし (これが「別のページ」の鍵となります)、新しいコンテンツでアニメーション化します。PushState をサポートしていないブラウザーでは、ページは他のサイトと同じように読み込まれます。

于 2013-08-02T13:38:58.177 に答える