Animated Page TransitionはAjaxを使ってコンテンツをスライドアニメーションさせるサイドタブナビゲーションを実装することができます。コンテンツ部分の読み込みにAjaxが使われています。
Animated Page Transition
以下のページからAnimated Page Transitionの実際のデモをチェックできます。
サイドにはタブナビゲーションが用意されており、各タブをクリックするとそれに対応したコンテンツがスライドアニメーションで表示されます。
スッキリしたシンプルなレイアウトでとても見やすいですね。
デモはレスポンシブになっており、iPhoneでも確認してみたところPC同様にアニメーション付きで動作しました。
コンテンツのみがスクロールされ、サイドにあるタブメニューは固定配置されているので、いつでもメニューにアクセスできるのが便利ですね。
コンテンツを上手く整理してスッキリした形で仕上げたい時なんかによさそうです。
スマホ、タブレット、PCと様々なデバイスに対応したスライドアニメーションつきのコンテンツを実装したい方は是非チェックしてみてはいかがでしょうか。
詳細は以下より。
