質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

4819閲覧

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

aoharu-haruru7

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/12/18 09:32

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

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

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

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

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

投稿2020/12/18 16:42

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aoharu-haruru7

2020/12/21 09:48

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

2020/12/21 10:59

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問