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

top of page

©2017 coliss