-5

4 つの異なるページを含むシンプルな Web ページを作成しました。ホームページには、次のような各ページのナビゲーション リンクがあります。

ページ1 ページ2 ページ3 ページ4

だから今、リンクをクリックすると、遷移効果のある本のページをめくるようにそのページを開く必要があるようなものを実装したいと思います。では、html5 や css3 などを使用してこれを実現するにはどうすればよいでしょうか。

4

2 に答える 2

5

言われているように、あなたの質問には具体的な答えを得るための以前の調査が少し欠けていますが、役立つかもしれない洞察がいくつかあります：

フリップ変換

CSS3 2D 変換とクリッピングの使用

  • Román Cortés によって作成された例を参照してください: http://www.romancortes.com/blog/pure-css3-page-flip-effect/ (Chrome でのみ動作します - デモはかなり古いもので、このブラウザだけがこれらの CSS を処理していました)プロパティ、webkit-接頭辞付き)
  • divここでは、さまざまな z-index を使用したの重ね合わせと、CSS3 2D 平行移動/回転変換(調整された原点を使用) を使用して、ほとんどのトリックを実行します。深度をシミュレートするために「box-shadow」と「gradient」が追加されました。nlob によって提示された Hakim El Hattab による方法は、代わりにキャンバスを使用してフリップを描画する一種の変形です。
  • 利点:
    • Light + IE9+、Firefox 19+、Chrome 25+、...
    • この例では、ページの表と裏の両方を示しています
  • 不便:
    • ちょっと平べったい…

CSS3 カスタム フィルターの使用

アニメーションとインターフェース

これらのソリューションはすべてtransition、2D 変換のプロパティまたはシェーダーの入力属性を微調整することにより、CSS を使用してアニメーションを作成します。

アニメーションは、選択したイベント (クリック、ドラッグなど) を処理することにより、基本的な CSS 状態 (:hoverたとえば) または Javascript によってトリガーできます。たとえば、このハンドラーを使用して、移行をトリガーするように DOM 要素のクラスを設定できます。

  • CSS:
.page {
    transform: translate(0px, 0px) rotate(0deg);
    transition: transform 1s;
}
.curled-page {
    transform: translate(42px, 42px) rotate(42deg);
}

-JS:

document.getElementById('page1-corner').onclick = function() {
    var page1 = document.getElementById('page1');
    page1.className += ' curled-page'; // Supposing page1 already has "page" as class.
};

与えられたすべての答えを少し掘り下げると、自分の道を見つけることができるはずです.

幸運を！

于 2013-05-29T12:58:31.497 に答える
1

CSS および基本的な JavaScript イベントの次のプロパティを理解している必要があります。

3D の保持、原点の変換、回転の変換、Z インデックス。

また、ページをリロードするとフリップエフェクトの要件が競合するため、ナビゲーションにハイパーリンクを使用することはできません。タスクのスクリプト全体を提供する人は誰もいません。自分で行う必要があります。

于 2013-05-28T18:06:40.713 に答える