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. jumboShare

    JavaScript

    SNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」

    jumboShareはSNSのシェアボタンとジャンボサイズのカウンター…

  2. Slight Submenu
  3. CSS3 3D Text Plugin for jQuery
  4. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  5. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP