CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 デモページ：サムネイルのホバー時 サムネイルのホバー時だけでもキャプションの表示だけでなく、画像などのサイズ変更、テキストの表示、各アイテムの可視化、配置変更などもアニメーションで行われています。 実装 実装はポイントをまとめて紹介します、Stepは3つです。 元記事では詳細に書かれているので、参考にしてください。 Step 1: HTML 画像、2つのパラグラフ、タグが一つのセットになっており、それぞれをリスト要素で実装します。 <ul class="portfolio-items"> <li class="item"> <figure> <div class="view"> <img src="images/1.jpg"> </div>

2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連