on:2013年6月12日sponsorsCSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。Operaなどのモダンブラウザ、IEは9+でご覧ください。デモページ水平型の画像ギャラリーで、CSS3アニメーションはページのロード時、サムネイルのホバー時、水平スクロール時など随所に盛り込まれています。デモページ:サムネイルのホバー時サムネイルのホバー時だけでもキャプションの表示だけでなく、画像などのサイズ変更、テキストの表示、各アイテムの可視化、配置変更などもアニメーションで行われています。実装はポイントをまとめて紹介します、Stepは3つです。元記事では詳細に書かれているので、参考にしてください。HTML画像、2つのパラグラフ、タグが一つのセットになっており、それぞれをリスト要素で実装します。CSSまずは、画像ギャラリーの基本的なスタイルです。最初の状態では、キャプションのテキストは不透明度を設定して見えない状態にします。0.92);}画像ホバー時のスタイルです。画像やキャプションをアニメーションで変形させます。-20px;}ホバー時には、画像のデータを表示するよう不透明度を変更します。}}ギャラリーのロード時には、最初は何も表示されていない状態で、画像がくるっと回転して表示されるようにします。rotate(0);}スクロールバーもデザインに合わせて変更します。このスタイルはChromeのみがサポートしています。全体的に重要なポイントであるなら、jQueryのプラグインでデザインを変更できます。JavaScriptスクリプトはまずは、ユーザーのビューポートをチェックすることから始めます。[/javascript]以下は全スクリプトです。ビューポートをチェックした後に各アイテムを配置し、サムネイルのホバー時とスクロール時のエフェクトを設定します。マウスのホイール操作にも対応させます。Posts関連記事が見つかりませんでした。