Animated Page Transition

JavaScript

Ajaxを使ってコンテンツをスライドアニメーションできる「Animated Page Transition」

Animated Page TransitionはAjaxを使ってコンテンツをスライドアニメーションさせるサイドタブナビゲーションを実装することができます。コンテンツ部分の読み込みにAjaxが使われています。

Animated Page Transition

デモ

サイドにはタブナビゲーションが用意されており、各タブをクリックするとそれに対応したコンテンツがスライドアニメーションで表示されます。

スッキリしたシンプルなレイアウトでとても見やすいですね。

デモはレスポンシブになっており、iPhoneでも確認してみたところPC同様にアニメーション付きで動作しました。

コンテンツのみがスクロールされ、サイドにあるタブメニューは固定配置されているので、いつでもメニューにアクセスできるのが便利ですね。

コンテンツを上手く整理してスッキリした形で仕上げたい時なんかによさそうです。

スマホ、タブレット、PCと様々なデバイスに対応したスライドアニメーションつきのコンテンツを実装したい方は是非チェックしてみてはいかがでしょうか。

Animated Page Transition

関連記事

  1. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  2. Foxholder
  3. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  4. GRT Responsive Menu
  5. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  6. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP