Animated Page Transition

JavaScript

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

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

Animated Page Transition

デモ

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

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

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

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

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

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

Animated Page Transition

タブの順番を入れ替えるiPhoneのSafariで複数あるタブの順番を入れ替える(並べ替え)やり方前のページ

iPhoneで写真撮影した2枚の画像を並べることができるフリーのアプリ「Twin Collage」次のページ

関連記事

  1. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  2. Material ScrollTop Button
  3. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

  4. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  5. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  6. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

最近の記事

  1. 広尾 スタバ
  2. 芳醇な香りのラムレーズンサンド
  3. Aモーニングセット
  4. 白トリュフの塩パンやメロンパンなど
  5. 東京都現代美術館

アーカイブ

PAGE TOP