on:2013年3月6日sponsorsjQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。Tabsのデモタブはレスポンシブ対応で、表示サイズに合わせて最適化されます。タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。実装は非常にシンプルなので、カスタマイズも簡単だと思います。HTMLHTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。外部ファイル「jquery.js」と「animate.css」を外部ファイルとして記述します。href="css/animate.css">script.jsとstyle.cssは外部ファイルでも、下記に紹介するコードをインラインで記述してもOKです。CSS外部ファイル「style.css」の中身です。JavaScript外部ファイル「script.js」の中身です。切替時のアニメーションは「fadeInLeft」を変更します。フェードであれば「fadeIn」、上からフェードは「fadeInDown」、バウンドだと「bounceIn」など簡単に変更できます。Posts関連記事が見つかりませんでした。