最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ

最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。
それぞれファイルを一式でダウンロードできるので、すぐに利用できます。

Fixed Background Effect
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。

Product Preview Slider
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

カード状に配置した各プロダクトをかっこいいアニメーションを使ったスライダーで表示します。

CSS Contact Form
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

テキスト入力、テキストエリア、ラジオボタン、チェックボックス、セレクトボックスなど、よく使用するフォームの要素をシンプルに美しく実装した、カスタマイズも可能なスニペット。

Secondary Sliding Navigaiton
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

デスクトップ時は上部に表示されるナビゲーション、タブレットやスマホ時にはアイコン表示になり、タップするとナビゲーションがスライド表示されます。

Parallax Hero Image
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE

ブラウザいっぱいに表示したヘッダ画像にパララックスのエフェクトを加えます。よくあるパララックスはスクロール時に要素ごとにタイミングを変えますが、これはマウスの動きで視差効果を与えます。

Full Screen Pushing Navigation
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

アイコンをタップ・クリックすると、オフキャンバスのメニューをブラウザいっぱいにスライドのアニメーションで表示します。

Bouncy Navigation
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

フルスクリーンのナビゲーションを気持ちいいバウンドのアニメーションで表示します。消える時も気持ちいい動きです。

Morphing Modal Window
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

ボタンをタップ・クリックすると、そのボタンからモーフィングでモーダルウインドウを表示します。

CSS Pagenation
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

スマホにもフレンドリー、レスポンシブ対応のページネーションの実装サンプルいろいろ。

Content Filter
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

カード状に配置した各パネルをかっこいいアニメーションでフィルタリングします。スマホにも対応しています。

3D Curtain Template
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

垂直に配置した各コンテンツをカーテンが両側から閉じるように、z軸（x, yではない）に沿って分割したコンテンツを合体させて表示します。

Expandable Project Presentaiton
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

デスクトップ時は水平に分割、スマホ時は垂直に並べた各サムネイルのパネルをクリック・タップでブラウザいっぱいに表示するイメージギャラリー。

CSS Animated Headlines
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

CSSアニメーションを使って、テキストを目立たせるコレクション。

Expandable Image Gallery
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

サムネイル画像をクリックすると、ブラウザいっぱいに広がりイメージスライダーに変わります。スマホ時は初期からスライダーです。

3D Rotating Navigation
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

デスクトップやスマホで、ナビゲーションがページの上部から3Dに回転しながらアニメーションで表示されます。

3D Animated Mockup
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

スマホアプリなどのプロモーション用のテンプレート。3Dに表示したモックアップをアニメーションで動かし、各部位のガイド機能も備わっています。

CSS Mega Site Navigation
デモページ
対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+

CSSで実装されたレスポンシブ対応の巨大サイズのメガナビゲーション。繊細なアニメーションが操作性を楽しくしています。