Animated Page Transition

JavaScript

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

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

Animated Page Transition

デモ

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

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

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

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

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

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

Animated Page Transition

関連記事

  1. no-image
  2. Jqx-Media-Slider
  3. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

  4. Sidr

    JavaScript

    横からサイドメニューが現れるjQueryプラグイン「Sidr」

    面白いjQueryプラグインがあったのでメモがてらご紹介します。Sid…

  5. Inspiration for Menu Hover Effects
  6. Multi-level push menu

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP