no-image

JavaScript

ダイナミックに回転してコンテンツが切り替わる「Page Scroll 3D」

Page Scroll 3Dは、クルッとダイナミックに回転してコンテンツが切り替わるjQueryプラグインです。ナビゲーションによる切り替えやスクロールでの切り替えも可能です。

Page Scroll 3D

デモ

デモではフルスクリーンによる迫力ある画像が表示されています。右側にはナビゲーションメニューが設置されていて、ここから各コンテンツへ切り替えることができます。

任意の項目をクリックすると、そのセクションまでクルッと立体的に回転して移動します。画面全体が回転するのでとてもダイナミックな印象です。また、ナビゲーションからだけではなく、上下にスクロールすることでもコンテンツを切り替えることが可能です。

各コンテンツはそれぞれsectionタグ括るようにマークアップしていきます。使い方、マークアップともにシンプルなので手軽に実装できるのがいいですね。

ダイナミックな3Dアニメーションでコンテンツを切り替えるWebページを作りたいという人は、ぜひ「Page Scroll 3D」をチェックしてみてはいかがですか?

関連記事

  1. jquery.matchHeight.js
  2. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

  3. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  4. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  5. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  6. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP