jQuery Page

JavaScript

モバイルに最適なスライドやフリップを実装できる「jQuery Page」

jQuery Pageは、スマホなどモバイルに最適なスライドやフリップを実装することができるjQueryプラグインです。シングルページ内での移動をアプリのようにサクサクとスライド、フリップできるので、たくさんの情報を閲覧しやすいように各ページに配分したいときに役立ちそうですね。

アプリのようにコンテンツを行き来できる

jQuery Page

デモページにアクセスすると、スマホのような画面内に、slide-in-from-right、slide-in-from-bottom、flip-towards-rightといったボタンが設置されています。

slide-in-from-rightは右から左へ、slide-in-from-bottomは下から上へスライドして画面が切り替わります。また、flip-towards-rightでは左から右へフリップさせることができます。

各ボタンをクリックしながら、いろんなページを行き来できるので、アプリのような感覚でコンテンツを閲覧できますね。

  • none
  • slide-in-from-left
  • slide-in-from-right
  • slide-in-from-top
  • slide-in-from-bottom
  • flip-towards-left
  • flip-towards-right

そのほか、insert()、remove()、fetch()などなど、いろいろなAPIを備えています。スライドやフリップでコンテンツを画面ごとに切り替えれる、モバイル的なシングルページを実装したい方は、ぜひ試してみてはいかがでしょうか?

jQuery Page

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

超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」次のページRELLAX

関連記事

  1. Luminous

    JavaScript

    軽くてシンプルなLightboxを実装できるスクリプト「Luminous」

    Luminousを使えば軽くてシンプルなLightboxを実装すること…

  2. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

  3. diamonds.js
  4. JavaScript

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  5. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

  6. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP