ページ遷移の際に、本のページをめくるような動きをいれたい。

Question

ページ遷移の際に、本のページをめくるような動きを入れたいです。
jqueryのturnというものが近いのですが、画像ではなく、他のページへのリンクをクリックしたらページがめくれるような動きでページ移動できるものを実装したいです。

もしあれば、それに近い動き方をするスライドのプラグインでも構いません。

知っている方いましたら教えて頂けないでしょうか？よろしくお願いいたします。
turn↓
http://www.turnjs.com/#samples/steve-jobs/8

Answer 1

turn.jsは、div要素をページめくりのように動かしているので、
応用でできます。
リンク先ページを、ロードしておき、
iframeに表示しておき、
リンククリック時に、そのiframeを使って、トランジションを起動、
トランジション終了時に、ページ遷移、といった流れでしょうか。

ただし、次の懸念点をクリアする必要があります。

• リンク先のページもロードしておかないといけないので、Webサイト全体が激重になる
• リンク先でも、同じトランジションを使用している場合、iframeから表示している時は、ロードを走らせない、などの処理をしないと、無限ループになる
• スクロールによって、ロード先のページの表示位置を調整しなくてはならない

上記の通り、通常のWebページでは、クリアがかなり難しい問題が山積するでしょう。
（どれも、かなりハードルが高いです。プロでもやりたくありません）

なので、どうしてもページ遷移でやりたいのなら、
フロントエンドフレームワークによるSPAで実装するのが、比較的楽になるでしょう。
（ただし、SPAはその時点でかなりハードルが高い）

Comments

[aoharu-haruru7]

大がかりな改造をする技術がないので諦めようと思います。

[miyabi_pudding]

そうですか。
解決したなら、BA選出か、自己解決の投稿をして質問を閉じて下さい。