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. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

  2. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

  3. textfit.js

    JavaScript

    コンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」

    textfit.jsは、コンテナ内に表示するテキストをフィットさせるこ…

  4. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  5. HR Navigation Responsive Menu
  6. Reshader

    JavaScript

    カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

    Reshaderは、カラーの濃淡を得ることができる便利なJavaScr…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP